https://kanegaetakanori.com/ktwdplus/wp-content/themes/twentythirteen-plus/img/sirone-01.mov

1-1. あまり動きの多くないサイトにすること
全体としてあまり動きの多くない落ち着いたサイトにするというお話がありましたので、画像は基本的に静止画とし、フルスクリーン表示などは多用しない構成にしています。

1-2. 参考サイトをベースに検討
言われていた下記の参考サイトをもとに、全体の雰囲気やレイアウトを検討しました。
https://design.thebase.com/detail/119

1-3. フルスクリーンより少し小さめの画像サイズ
フルスクリーン表示ではなく、少し余白のあるサイズ感の画像を使用する形にしています。

1-4. 写真を2枚使用した表現
Instagramやこれまでの更新内容を拝見すると、写真を2枚使って配置されている印象があったため、その雰囲気をトップページでもうまく表現できるような構成にしています

2-1. 現在のサイトカラーの踏襲について
最初は現在のサイトカラーを引き継ぐ案も考えましたが、実際に配置してみると大きな変化が感じられなかったため、別の案で作成しています。

2-2. イントロ表示のレイアウト
画像の配置パターンを8種類用意し、すべて静止画で構成しています。
イントロ部分でそれらがランダムに表示され、必ず異なるレイアウトが見えるようにしています。

2-3. トップ画像の投稿数について
トップに設定する画像は、投稿数に制限はありません。
4投稿でも40投稿以上でも問題なく表示できます。
個人的には、画像は多いほどサイトの見せ方の幅が広がるため、できるだけ多くある方が良いと考えています。

動画を見ていただくと、簡単に設定できるようにしている点も確認いただけると思います。
画像をアップしてテンプレートを選択するだけで設定できる仕様にしています。

また、縦配置のレイアウトで使用する画像については、横画像でアップしても自動的に縦表示になるように調整しています。
これは、画像サイズによって配置が崩れないようにするための対応です。

トップ画像の配置については、8種類のレイアウトを用意しています。
正直なところ、ここまで必要かとも思いましたが、あって困るものではないですし、使用しなければよいだけなので一応用意しています。

ぶっちゃけると、個人的には工数も増えているので、正直少し手を抜こうかな.. とも思いましたが。
冗談です、すいません。（笑）

毎回表示されると煩わしく感じる方もいるかもしれないと思ったため、クリックするとイントロをスキップして表示できるようにも作成しています。そのような方はわりとクリックされることも多いので、必要に応じてすぐトップページを表示できるようにしています。

※イントロ後はイントロと同じような配置は絶対に表示されないようにしています（これ結構大変でしたアピール）

トップの画像の下にオンラインのカテゴリーを表示させています。
これは決定ではないので（カテゴリーを選定）決して4つということではないです。※要相談

右上にハンバーガーボタンがあるのでこれをクリックするとハンバーガー内に色々設置しています。

背景は、一般的な単色の背景ではなく方眼紙のデザインにしています。
これは僕自身が最近少しはまっているというのもありますし、他のサイトでも利用していたりします。（マスの大きさや色はサイトごとに調整しています）。

利用している理由としては、以前から白一色やベタの背景だとあまり変化が感じられないと思ってたり、品を出そうとして入れる動き（装飾など）が少し不自然に感じることがあったため、背景には何かしら変化をつけたいと考え、方眼紙を設置しています。

また、僕自身のデザインはアナログ感とデジタルのハイブリッドが特徴かなと思っていて、昔、方眼紙やノートの背景のようなデザインが一瞬流行りそうで流行らなかったことがあり、「これを使うタイミングはいつだろう」と思っていたのですが、今の気分としてはそれが面白いかなと思い採用しています。
最近はあまり使われることもなく、ほとんど見かけないデザインなので、そういった意味でも良いかなと思いました。

また、今回のサイトは文字サイズが比較的小さめなので、細かい方眼紙の背景があることで、文字が視覚的に整い、見やすくなる効果もあると考えています。

さらに、このサイトでは背景が1色だけだと少し面白みに欠けるかもしれないと思ったため、
中村さんたちが気分やシーズンで変更するのも面白いかなと思い、背景は管理画面から変更できるようにしています。

動画のように色を選ぶのでもよいですし、cssカラーチャートの番号を入れるでも可能です。
参考）#a6d684みたいな数字
#ffffffの白とかも面白いと思っています
色々サイトありますが、参考まで
https://www.colordic.org
https://itsakura.com/html-color-codes

ワードプレス（以後WP）とカラーミーは別物なので、片方を変更をしたらあわせないといけないので、カラーミーの方も変更できるようにカスタムしています。

Read Moreのボタンを参考サイトのようにするかも検討したのですが.. ちょっと悩んでいます。
角丸の方があっているのかな？とも思いながら…

フォントも始めは明朝体も考えたのですが、ロゴとのバランスを考えると今のフォントが良いのかなと思っています。（これ結構悩みました）
Google webfont
Inter
https://fonts.google.com/specimen/Inter
Noto Sans JP
https://fonts.google.com/noto/specimen/Noto+Sans+JP?query=Noto+Sans+JP

ロゴに関しては、SVGという表示の仕方をするので、ロゴデータがほしいです。（.aiファイル）
理由がjpgやpngとかで表示するのではなくアルファベットや数字の羅列で表示するインラインSVGを作成するため。SVGだと、綺麗に表示されるためです。
こんなのを作成します。Oの文字に対して下の数字やアルファベットの羅列で表示します。

ハンバーガーボタン内のメニューについては、WordPressとカラーミーで別管理になるため、内容を合わせる必要があります。
そのため、WordPress側で表示している内容をカラーミーにも貼れるように、管理画面をカスタムしています。
作業の流れは下記になります。

WordPress管理画面 →「Side Menu HTML」→ コピー
カラーミー管理画面 → ネットショップ → デザイン → フリーページ → 貼り付け

この作業は、ニュースや商品を追加した際に更新する必要があります。
一見すると少し面倒に見えるかもしれませんが、実際には更新作業の流れの中でセットで行うだけなので、慣れてしまえば特に問題ないと思います。

ニュースの部分は、管理画面でURLを入れるか、実際に記事を書くかで動作が変わるようにしています。

URL欄にURLを入れると、そのサイトへ直接飛ぶ仕様です。
Instagramの投稿のように、簡単な案内だけで良い場合は、その方法で飛ばしてしまう方が楽かなと思います。

※なお、WordPressの記事ページ側のテンプレートはまだ作成できていません。（申し訳ありません）
ただ、全体の雰囲気やトーンは大きく変わらない形になる予定です。

Styleのところがまだできていないです。
これが必要かなとちょっと思ってきています。
理由が次に送るカラーミーの中身を見てもらうとスタイルいらないのではと思ってきています。
ただ、メニューのバランスとかも必要なので、その場合は、Instagramとかを表示でもよいかとも思っています。

ここからは利用するか謎のトップのシステムの話になります。
トップのイントロの背景は全て色変更できます。

そしてもう一つ写真なしもあります。
ロゴデータがないので、とりあえず今はハンガーだけのアイコンですが、ここもランダムで作成可能です。

これは、お休みの時期や正月などに背景を変更しておくのも面白いかなと思い、2-1のときに作っていた機能を残しています。
とはいえ、実際にはなかなか気付かれないかもしれませんが、そういうちょっとした変化も面白いかなと思っています。

ちなみにロゴの色も変更できるのです。

書ききれてないのもあるかもですが、こんな感じがトップとサイトのデザイン案になります。

※次回に続きます。