●サイトの大雑把な青写真
さぁ、準備は整った。で、どうやって始める？
まずはトップページ「ＨＯＭＥ」の作成からだよね～。
鉛筆で、大体こんな感じというラフスケッチはある。
まず里庭を表す大きな写真があって、その下に各項目（カテゴリー）に飛ぶ四角いボタンが並んでいる感じ。子供でも楽しめるようにシンプルで分かりやすく。
で、例えば「月別の花々」のボタンを押すと、月別に咲く花の一覧表の画面（カテゴリートップ）に飛ぶ。
そこで、１０月欄の「朝顔」の文字をクリックすると朝顔画面のトップ（個別トップ）に飛ぶ。そこには朝顔栽培の基本情報が載っていて、下に朝顔記事の一覧があるので、そこから各記事に飛ぶという具合だ。
だから、「ＨＯＭＥ＞カテゴリートップ＞個別トップ」は親・子・孫関係にして「固定ページ」で作ることになる。
で、各ページの一番上（ヘッド）には写真を持ってくる→上記例では、「庭の写真＞花々の写真＞朝顔の写真」と３つの写真を用意するわけだが、問題は３つ。
１、写真のサイズはどのくらいがいいの？
２、花々の写真はコラージュしないとだよね、どうする？
３、いやそもそもサイトの幅はどうする？
●サイトの画像サイズを決める
まぁこれもたくさんの記事がありました。で、次のように決めました。
ＰＣ画面がキャンバス（アートボード）だとすると、その幅は1920px。
この時、1200pxに収まっていると見やすいようです。
なので、情報（コンテンツ）幅は、1200pxとする。
SWELLのトップ画像（メインビジュアル）は 【1600 900】
でもあれは1920pxの画面一杯に広がるよね。あれってどうなってんの？
（まだ、画像が伸び縮みすることを知らない）
まぁ、同じにしてみるか。で、メインビジュアル（親）が決まると、カテコゴリーヘッド（子）や個別ヘッド（孫）は、それより小さくないと訪問者が困惑する。で、次のように決めた。
親：メインビジュアル 【1600 900】
子：カテコゴリーヘッド【1600 700】
孫：個別ヘッド 【1600 500】
次に各記事を表すアイキャッチ画像。
SNSでは1200×630pxが推奨されているようだが、ちょっと横長すぎる。
ＰＣで馴染んでいる16：9が扱いやすいので
、
アイキャッチ 【1200 675】
OGP画像は、アイキャッチ画像が設定されていない記事にて代わりに表示される画像で、SNS用に【1200 630】が推奨されているが、まぁ作るとしてもアイキャッチと同じ大きさだろう。
で、記事内画像は、基本アイキャッチと同じ大きさにすることにした。
けれど見せる内容によってフリートリミングで形を変える。
まぁ、写真が重くなり過ぎなければいいのだろう。
あと、サイトのシンボルとなるアイコン（サイト名の最初に出てくるマーク［ファビコン］）は、ほぼ次の指示でした。（え～、こんなに大きかったの、とビックリ。これがあのサイズになるんだね～）
ファビコン 【512 512】
まとめると↓
さて、サイズを決めたので、あとは良かれと思う写真を各ヘッド用に切り取って、それを各ヘッドの大きさにリサイズすればいい。とはいえ、数多の写真群の中から選ぶのが大変。それに、カテゴリーヘッドの写真はコラージュとなる。どうする？