名作の型でホームページを築く

白紙から考えると、どこかで見た形になる

ホームページを作ろうとすると、トップに何を置くか、メニューをどうするか、ページを何枚に分けるか、と考えることが一気に出てきて、そのうち手が止まって、とりあえずAIに「おしゃれなホームページを作って」と頼んでみる。で、返ってくるのは、それっぽいんだけど、どこかで見たような、意味のない飾りが並んだページなんですよね。

デザインの経験が無いまま並べ方を決めているので、余白も順番も、なんとなくになる。これは腕の問題ではなくて、何を手本にするかを決めていないからです。

一から考えなくていいです。先に、いいなと思うページを集めます。

LPとの違いは、ページが何枚もあること

前のコース「写真1枚からLPを錬成する」で作ったLPは、縦に長い1枚のページでした。ホームページは、トップ・紹介・やっていること・問い合わせ、のようにページが何枚かに分かれていて、メニューから行き来します。作り方の考え方はLPとほぼ同じで、違うのは形だけです。

名作が並んでいる場所があります

そこで使うのが、ホームページのギャラリーサイトです。プロが作った出来のいいサイトを集めて並べている場所で、業種や色、動きの種類から探せます。ここから持ってくると、余白も読みやすさも、最初からひと段上がった状態で始められる。自分で一から並べるより、ずっと早いです。

先に線を引いておく、持ってきてはいけない物

ギャラリーに並んでいるのは、どれも誰かが作って持っているサイトです。見て学ぶのは自由ですが、中身をそのまま持ってくると、著作権などに触れることがあります。たとえば、こういう使い方です。

• 写真・イラスト・アイコンを、そのまま使う
• ロゴやサイト名、それに似せた物を使う
• 文章やキャッチコピーを、そのまま、または少し言い換えただけで使う
• そのサイト独自のアニメーションのコードを、写して使う
• 色・配置・飾りまで、見た目をそっくりそのまま再現する

逆に、ページを何枚に分けるか、1枚の中に何をどの順で並べるか、どれくらい余白を取るか、といった組み方は、たくさんのサイトで共通して使われている考え方です。これを学んで、自分用の型に組み直すぶんには、基本的に問題ありません。このコースで持ってくるのは、こっちだけです。

どこからが「そっくり」なのかは、はっきり線が引けない所もあります。迷った物は使わない、で進めてください。

集め方

1. ギャラリーサイトを開いて、一覧の画像を眺める
2. 気になったサイトを押して、実際のサイトを開き、最後までスクロールする
3. メニューから、中のページ（紹介やサービス、問い合わせなど）も開いてみる
4. いいなと思ったページのURLをコピーして、そのページのどこが良いかを一言メモする
5. 3〜5サイトぶん集まったら終わり

スクリーンショットは要りません。分析は次のSTEPでAIにやってもらうので、こちらで用意するのはURLと一言だけです。一言は「ファーストビューの写真の大きさ」「料金の並べ方」「スクロールすると写真がふわっと出てくる所」くらいの、自分の言葉で大丈夫で、これがそのままAIへの注文になります。