企業Webサイト制作を突然頼まれた。DTP屋のずぼらWeb制作記(1)
素人ながらもデザインとかコーディングとか好きです。仕事中の空き時間に、ローカル環境WordPressで勝手に自社サイトをリニューアルして遊んでいたのは私です。だってうちの会社のサイト古くてだs..いえ、何でもないです。
そうこうしていたら突然、関連会社を立ち上げるから、ホームページ作ってと..!
え、作ります!ととりあえず答え、それから詳細を聞く。制作期間約1ヶ月、ロゴや素材などなし、載せる情報もほとんどなし、とりあえず作ってとの無茶振り..。もちろん自分の仕事しながら同時進行ですよ。
まあ、普段は事務的なDTP屋なので、デザインやコーディングできるとなると嬉しいです。いやかなり嬉しいです。でも載せる情報がないって、どうすれば..。
更新もいまのところあまりしないらしいので、WordPressではなくてHTML5とCSS3で組んでいくことにしました。もちろんスマホ対応、レスポンシブデザインで。
サクッと作りたいから、テンプレ探してみた
デザインも色使いも、なんの指定もなしって逆に作りづらいんですが、私の好みでいいそうです..。なんだその依頼。じゃあ好きなように作りますか。
でも久しぶりなので、必要なファイルってなんだっけ?めんどくさいなーということで、最新で商用利用無料のHTML5&CSS3テンプレートを検索。
上ふたつにはかっこいい海外のテンプレートがたくさん! でも今回作る関連会社用には、スタイリッシュすぎるかも..。ということで次。
ここはシンプルで、適度にデザインもいい感じのテンプレートが6種類あります。中でもNo.005がシンプルながら控えめな美しさを感じるデザイン。
デモサイトをチェックし、さらにスマホでもチェック。上部メニューが、よくあるタップでリストが出てくるタイプではなく、テキストのままです。
ちょっと気になるのが、スマホなどでメニューが2行になったとき。センターのはずのメニューが左寄せで行間が詰まりすぎになることと、PCの場合スライド画像にかぶってしまうこと。
スクリプトを修正するか、そのままでもメニュー数が少なければ大丈夫かな。まあ今回は1~3ページ予定なので、なんとかなるでしょう。
coolwebwindow.com
よし、これにしよう! さっそくダウンロード。ZIPを解凍すると、HTML5_005フォルダの中に以下のものが入っています。
- cssフォルダ
- imagesフォルダ
- jsフォルダ
- index.html
ためしにindex.htmlを見てみると、デモサイトとまったく同じページが表示されました。ということは、いらないところを消去して、必要な内容を追加していく必要がありますね。
でもJavaScriptなどのもろもろがすでに適用されていて、ラクラク! もう最近、技術の進歩が激しすぎてついていけないのでありがたい..。Cool Web Windowのvanillaさん、ありがとうございます。
次回に続く
ダウンロードしたところで、本来の仕事をやっておかないとまずいことに気づきました。
というか、初めは手打ちで作ろうと思ったのにテンプレ使用..。これで極度のメンドクサガリぶりが露呈してしまいましたね。でもこのテンプレはよさげです。続く!