企業Webサイト制作を突然頼まれた。DTP屋のずぼらWeb制作記(1)

素人ながらもデザインとかコーディングとか好きです。仕事中の空き時間に、ローカル環境WordPressで勝手に自社サイトをリニューアルして遊んでいたのは私です。だってうちの会社のサイト古くてだｓ..いえ、何でもないです。

そうこうしていたら突然、関連会社を立ち上げるから、ホームページ作ってと..！

え、作ります！ととりあえず答え、それから詳細を聞く。制作期間約1ヶ月、ロゴや素材などなし、載せる情報もほとんどなし、とりあえず作ってとの無茶振り..。もちろん自分の仕事しながら同時進行ですよ。

まあ、普段は事務的なDTP屋なので、デザインやコーディングできるとなると嬉しいです。いやかなり嬉しいです。でも載せる情報がないって、どうすれば..。

更新もいまのところあまりしないらしいので、WordPressではなくてHTML5とCSS3で組んでいくことにしました。もちろんスマホ対応、レスポンシブデザインで。

デザインも色使いも、なんの指定もなしって逆に作りづらいんですが、私の好みでいいそうです..。なんだその依頼。じゃあ好きなように作りますか。

でも久しぶりなので、必要なファイルってなんだっけ？めんどくさいなーということで、最新で商用利用無料のHTML5&CSS3テンプレートを検索。

上ふたつにはかっこいい海外のテンプレートがたくさん！でも今回作る関連会社用には、スタイリッシュすぎるかも..。ということで次。

ここはシンプルで、適度にデザインもいい感じのテンプレートが6種類あります。中でもNo.005がシンプルながら控えめな美しさを感じるデザイン。

デモサイトをチェックし、さらにスマホでもチェック。上部メニューが、よくあるタップでリストが出てくるタイプではなく、テキストのままです。

ちょっと気になるのが、スマホなどでメニューが2行になったとき。センターのはずのメニューが左寄せで行間が詰まりすぎになることと、PCの場合スライド画像にかぶってしまうこと。

スクリプトを修正するか、そのままでもメニュー数が少なければ大丈夫かな。まあ今回は1～3ページ予定なので、なんとかなるでしょう。

coolwebwindow.com

よし、これにしよう！さっそくダウンロード。ZIPを解凍すると、HTML5_005フォルダの中に以下のものが入っています。

ためしにindex.htmlを見てみると、デモサイトとまったく同じページが表示されました。ということは、いらないところを消去して、必要な内容を追加していく必要がありますね。

でもJavaScriptなどのもろもろがすでに適用されていて、ラクラク！もう最近、技術の進歩が激しすぎてついていけないのでありがたい..。Cool Web Windowのvanillaさん、ありがとうございます。

ダウンロードしたところで、本来の仕事をやっておかないとまずいことに気づきました。

というか、初めは手打ちで作ろうと思ったのにテンプレ使用..。これで極度のメンドクサガリぶりが露呈してしまいましたね。でもこのテンプレはよさげです。続く！

はんぱログ