たまたま目にしたこのツイート
ブロガーでミニサイトの勉強している人、わださんのこのスレ追いかけてみると面白いよ。
— a-ki (@akisfactory) January 6, 2019
わださんのミニサイト作りの特徴は一旦既存のテンプレでブログとして記事を書きためてUIは後で組みなおすところ。
ビフォーアフターで見比べると何を考えてデザインしたかよくわかる。 https://t.co/qj4COpdNBX
ごれむす（現：ごれ）さんがRTしたやつです。
「a-ki」さんのツイート。そしてさらにその先のツイートは「わだ（和田亜希子）」さんのツイートです。
冒頭から登場人物が多くてゴチャゴチャしてしまいましたが、要は有益ツイートってやつですな。メモしておきます。
ぼくも2018年からミニサイトづくりに精を出しているので、いいヒントになりました。どうもありがとうございます。
みなさんにもシェアするので、お役立てください。
わだ氏（和田亜希子氏）の「ミニサイト」づくりについて
今年の目標は「既存サイトのリニューアル＆再生」。リニュ第一弾はグランピングで明日中にデザイン作成＆HTML化するところまで。今はWordPressテンプレそのままなのでレイアウトも全面変更で。前から使ってみたかったBootstrapでコーディングするつもりなんだけど、使えるかなあ、ドキドキ。
— 🍺わだ：ミニサイト作り職人 (@wada_akiko) January 5, 2019
参考にしたいスマホサイトを巡回中。タイトル残しをするかどうか。サムネイルとテキストの比率はどのくらいがいいか。ハンバーガーメニューは少し前は「意味不明」とかディスられてたこともあったけど、アプリ全盛期で多くの人があっという間に慣れたよな、自分も。 pic.twitter.com/EOMp5dwCkk
— 🍺わだ：ミニサイト作り職人 (@wada_akiko) 2019年1月6日
「ハンバーガーメニュー？ なんのこっちゃ」って思ったけど、左上のあれか。
スマホサイトデザインなんて、数年前は「左サムネイル、テキスト流して右端に＞マークをワンカラムで縦に並べる、あとタイトル横にハンバーガー」って程度だったけど、端末サイズも解像度も変わって、閲覧時間もどんどん伸びて、デザインは単純だけど結構考えないとだめになってるんだなあと。
— 🍺わだ：ミニサイト作り職人 (@wada_akiko) January 6, 2019
超・平凡だけど、トップはこんな感じかなあ。つかこれだとBootstrap使う意味がないかも。 pic.twitter.com/jN06JB6NNf
— 🍺わだ：ミニサイト作り職人 (@wada_akiko) January 6, 2019
カテゴリページと記事ページ。上部にメニューバーを作るかどうかで悩む。ハンバーガーだけってやっぱり不安なんだよなあ。 pic.twitter.com/rEByMzq3Ov
— 🍺わだ：ミニサイト作り職人 (@wada_akiko) January 6, 2019
東京＆関東グランピング情報館の新デザイン案。平凡一番。そしてスマホ版から先に作ると「パソコン版もこれでいいじゃん」って、次の作業に移るモチベーションが下がるw pic.twitter.com/Q3P78O08Ly
— 🍺わだ：ミニサイト作り職人 (@wada_akiko) January 6, 2019
こちらが『東京＆関東グランピング情報館』です。
スマホ版のWeb魚拓が今こんな感じ（2019年1月6日現在）。ここからどう変化するのか楽しみだなあ。模様替えが終わったら、新旧デザイン比べてみると面白いかも。
パソコン版トップ。小さなサムネイルが多すぎてちょっとごちゃっとした印象になりそうなので、そこは画にする段階でうまくまとめたい。 pic.twitter.com/TMQn6ZfONI
— 🍺わだ：ミニサイト作り職人 (@wada_akiko) January 6, 2019
パソコン版のカテゴリと記事ページ。基本、スマホと一緒の構成なので手抜きまくり。 pic.twitter.com/C7IAxFy7Lj
— 🍺わだ：ミニサイト作り職人 (@wada_akiko) January 6, 2019
PC版のWeb魚拓は今こんな感じです（2019年1月6日現在）。
外出ランチから帰宅し、作業は紙ベース→パソコン作業に。その前に、頭ちょっとクールダウンしたとこで、午前のデザイン案を見ながら「迷い」をつぶす作業。
— 🍺わだ：ミニサイト作り職人 (@wada_akiko) January 6, 2019
・「エリア別」「テーマ別」はどっちを優先する？
・訪問レポートはスライダーからだけでいい？
・スマホ版にメニューバー入れる？
（続く）
（承前）
— 🍺わだ：ミニサイト作り職人 (@wada_akiko) January 6, 2019
・パソコン版は幅何px？
・配色どうする？
・パソコン版の「エリアで探す」には関東+αの地図を入れてクリックできるようにすべき？
・すっかり忘れてたけど「グランピングとは」「グランピング施設の選び方」「グランピングを楽しむためのTIPS」的な読み物どこいれる？初心者マーク登場か？
パソコンで画面作りをスタート。今回アイコン類はここのを使わせてもらうことに。たくさんあってキュート。 https://t.co/C0zPcRSXDU
— 🍺わだ：ミニサイト作り職人 (@wada_akiko) January 6, 2019
https://t.co/dZZzbg5tlR
— 🍺わだ：ミニサイト作り職人 (@wada_akiko) January 6, 2019
また変える可能性あるけど（タイトル部分を今回はじめて外注してみようかなとも）、とりあえずの配色はこれ。
スマホ版トップページの画面作成。なんかスカスカして寂しい気もするなあ。まあHTMLコーディングしながら余白とかは調整しましょう。ちなみに画像編集ソフトで作っただけなのでまだ完成までは遠い・・・ pic.twitter.com/mKUZQMjurh
— 🍺わだ：ミニサイト作り職人 (@wada_akiko) January 6, 2019
a-kiさんがハードル上げてきたw は冗談として、苦手なWPで作ったこと、あと割と情報サイトに適したテーマを選んだこともありもトップ再構築まで10ヶ月かかった。おかげでアクセス解析も参考にしてトップページデザイン作れるのは大きなメリット。10ヶ月前に手がけるよりずっと確信持って作業できてる。 https://t.co/pH5u5kasma
— 🍺わだ：ミニサイト作り職人 (@wada_akiko) January 6, 2019
まとめ
はい、そんなわけで以上です。
私ごときが解説することも特にないのでこれで終わります。考えるな、感じるんだ。
ちなみにお二方のご著書は以下の通りです。紹介します。
和田亜希子氏の本
a-ki氏の本
ごれ氏のブログ
なお、ごれ氏のブログはこちらです。
