プロジェクト概要
植物のある暮らしの魅力が伝わるサイトを目指して制作いたしました。
WordPressで構築した、「不揃いがいい。」をコンセプトに個性のある植物を育成・販売する odd good plant（オッドグッドプラント）様のサイトです。塊根植物・アガベ・多肉植物・観葉植物を対象に、育て方を記事にする植物専門メディアの役割も担っています。Plants・About・Blog・Q&A・Contactの5ページ構成で、取り扱う植物の紹介、コンセプトと運営者情報、カテゴリ別の記事数つきの育て方ブログ、水やりの頻度のよくある質問、Instagramの埋め込みまでを掲載しています。
規格に収まらない姿を欠点ではなく個性として楽しむという「不揃いがいい。」の価値観を、植物に詳しくない人にも心地よく伝えたい。塊根植物やアガベといった専門性の高い植物の育て方記事を継続的に増やしていく前提があったため、記事が増えても探しやすく、スマートフォンでも読みやすい構造にする必要がありました。
白地に多肉植物を高さの違う4本の縦長パネルで並べ、「不揃いがいい。」の見出しを添えて、揃っていないことの美しさをレイアウトで表現しました。ナビと見出しは細い英字で統一し、日本語の小見出しを添えて静かな印象に整えています。記事は「カテゴリから探す」で植物の種類別に記事数つきで分類し、ブログ一覧には日付とカテゴリ名を付けて探しやすくし、スマートフォンではハンバーガーメニューで閲覧性を確保しました。
制作のポイント
4枚の縦長写真と「不揃いがいい。」を白地に置く
最初の画面は白地に、コンクリート鉢に植えた多肉植物の写真を高さの違う4本の縦長パネルで並べ、左に「不揃いがいい。」の大きな見出しと「普通とはちょっと違う植物で、普段とはちょっと違う日常を。」の一文を置いています。その下に植物専門メディアである旨の説明と「育て方の記事を読む →」の枠線ボタンがあります。
細い英字のナビとセクション見出しで揃える
ナビは「Plants・About・Blog・Q&A・Contact」の5項目を細い英字で右上に並べています。各セクションは「Plants」「About」「Category」「Blog」「FAQ」といった大きな英字見出しに日本語の小見出しを添え、塊根植物の写真を大きく置いたPlantsの紹介が続きます。
カテゴリ別の記事数とFAQを一覧にする
「カテゴリから探す」では塊根植物41記事、アガベ44記事など記事数つきで分類し、ブログは日付とカテゴリ名をつけて一覧にしています。WordPressで更新できる構成で、FAQには水やりの頻度などへの回答が並び、運営者情報とInstagramの埋め込みが続きます。スマホではハンバーガーメニューにまとめています。
デザイン
