サザエさん症候群を耐え抜くためのWebサイトを作りたい　④サンプルサイト作り編

こんばんは、大越です。

「日曜日午後の憂鬱な時間に更新される、サザエさん症候群を乗り越えるためのサイトがあったら素敵じゃない！？」という天啓を受け取り、後先考えずサイト作りに邁進ブンブンするこの企画。

前回はHTMLとCSSの基本的な使い方を学び、文字やら画像やらをテキトーに表示させて終了しました。

↓　↓　↓前回の記事はこちら↓　↓　↓

今回は「１冊ですべて身につく　HTML&CSSとWebデザイン　入門講座」の本に記載されているサンプルサイトを作りながら、HTMLとCSSの実用的な使い方を学んでいきます。

どうやら、「WCB CAFE」とい架空のカフェのサイトを作っていくみたいです。カフェの「お洒落な人間しかくつろいではいけない」という暗黙のドレスコードにビビって結局マックに行ってしまう僕ですが、ここではお店の紹介ページやニュース、メニューのページなんかも作っていくようですよ。ワクワクして手汗が止まりませんね。

基本は本に書いてあるコードを写すだけなので、簡単です。自分でイチから作っていくとなると難しくて時間もかかるんだろうなぁ……。

まずは、フルスクリーンレイアウトのトップページを作っていきます。でっかい画像が一面に表示されて、なんとなくオシャレな気がするアレです。

ポチポチ書いていきます。

上部に表示されるロゴとナビゲーションメニューを作りました。

キャッチコピー部分です。こんなお洒落なキャッチコピー、僕には不釣り合いです。「本を売るならBOOK・OFF」みたいなのが安心できます。

後ろにでっかくコーヒーの画像です。これが「フルスクリーンレイアウト」なんですねぇ。シンプルな構成ですが、コンセプトを一撃必殺的に伝えることができるので良いですね。

少しお洒落な画像が続いてしまいますね。このままいけば、このnoteには表参道のようなファッショナブルな雰囲気がムンムンと漂ってしまいます。ですが僕はそんな伊達者ではありません。凡俗です。

牛丼の画像で中和しましょう。

続いて、新メニューの販売やイベント告知などを掲載する「NEWS」のページを作成していきます。ブログのサイトに近いですね。

ロゴとナビゲーションメニューは、先ほど作ったトップページと共通です。なのでコードをコピペすればそれでオッケー。適度にコピペして、楽に、そして統一感のあるデザインのサイトを作成していくのがコツのようです。

本文を試しに入力してみました。魂が震えますね。

ちなみに、上部のロゴマークをクリックすると……

ご覧の通り、先ほどのトップページに移動します。Webサイトらしい操作ができると、途端にそれっぽくなってテンションが上がりますね。貧乏ゆすりがビートを刻みます。

せっかくなのでバナー画像を変更してみました。わたくしのTwitterのバナー画像ですね。大好きな画像です。

記事も書いてみます。集中力の乏しさが遺憾無く発揮されていますね。

こちらのページは２カラムのレイアウトにします。コンテンツが２列で表示されている、よくあるやつです。

こんな感じです。右側に「カテゴリー」と「このお店について」が追加されました。

一億総スマホ時代の今、地味にめちゃ重要なのが「スマホでも見やすいサイトを作る」こと。僕のサイトもスマホで気軽に見てもらいたいので、スマホの画面サイズに合わせたレイアウトも設定しておかなければいけません。これ重要。

現段階では、表示サイズを縮めたらこんな感じになってしまいます。せっかくのデザインがぐちゃっとなり、何を伝えたいサイトだか分かんなくなってしまいます。これでは見る気失せますね。爪の半月でも眺めてた方が幾分気分が晴れます。

スマホ用のレイアウトを設定しました。こんな感じで、2列で表示されていたコンテンツが１列に変更されます。これだと見やすい。素敵じゃないか。

「NEWS」ページは以上です！　あぁ、お洒落だな。

中和中和。

続いては「MENU」のページを作成します。その名の通り、お店のメニューを沢山の写真で紹介するページです。

こんな感じです。写真を規則正しく並べる、タイル型のレイアウトです。日曜ユーウツ通信のコンテンツも、こんな感じで並べてみたいなぁ。

一部の画像のサイズだけを変えて、メリハリを持たせることができます。コンテンツの重要度に従って大きさを変えることで、見る人をうまく誘導させるっつー手法です。サイトを見る人をできる限り操作しようとするなんておこがましいとは思わんかね………………………。

スマホ画面への対応も忘れずに。３列だったのが２列になりました。「画面サイズに合わせて画像のサイズも変更される」というような地味な設定もされています。こういう積み重ねが、使っていて引っ掛かりのない快適なサイト作りに繋がっていくのでしょうね。

サンプルサイト作りはこれにて終了です！

本にはまだ「お問い合わせページ」の作成が残っていて、問い合わせフォームやGoogle map、YouTube動画を挿入する手順が紹介されていましたが、自分のサイトで実装するか微妙だったので飛ばすことにしちゃいました。必要になったら読みます。

とりあえず、この本は終了！

HTMLとCSS。最初は難しそうでしたが、やってみると単純明快で楽しかったです。プログラミングって感じではなかったですね。

ここまで読んでくださり、ありがとうございました。

次回からは、またWordPressに戻ります。イチからサイト作りをしていくことも考えたのですが、記事の更新のしやすさを考えると、noteのようなエディターが用意されているWordPressを活用するのが良いっぽいです。ここは頭のいい人が作った技術をお借りしましょう。

それでは、何編になるかはまだ分かりませんが、また次回。

それでは！