京都市右京区の京北で原木栽培のきのこを育てる「京のきのこ処 京茸～きょうたけ～」のサイトは、写真の力を最大限に生かした食のブランドサイトとして参考になります。説明文を積み上げるのではなく、原木しいたけの質感や杉林の風景を大きく見せることで、商品の魅力と作り手の姿勢を同時に伝えている点が印象的です。
このサイトを運営しているのは、京北で複数の事業に取り組む株式会社百里衆です。きのこの生産を軸にしながら、農業や不動産に関わる活動までを1つのサイトにまとめており、情報が増えるほど画面が散らかりやすいという課題に対して、写真と余白で整理するという答えを出しています。
ここでは、ファーストビューの作り方、縦書きを取り入れたトーン＆マナー、コンテンツを見せる順序、ボタンと導線の設計という4つの視点から、このサイトのデザインを読み解いていきます。
写真を主役に据えたファーストビューの設計
このサイトの第一印象は、ほぼ1枚の写真で決まっています。文字要素を最小限に抑えて被写体そのものに語らせているため、ページを開いた瞬間に何を扱っている会社なのかが言葉より先に伝わります。ここでは、ファーストビューを構成している3つの要素を順に見ていきます。
画面いっぱいの原木しいたけが最初のメッセージになる
ファーストビューには、竹籠に山盛りにされたしいたけのクローズアップが画面幅いっぱいに敷かれています。背景の緑がぼけていることで手前のきのこだけが立体的に浮かび上がり、傘のひだや表面のひび割れといった細部にまで視線が届きます。
食品を扱うサイトでは、雰囲気づくりのためのイメージ写真よりも、実物の質感が伝わる写真のほうが信頼につながります。加工感の少ない自然光の写真を選んでいるため、里山で育てているという背景とも矛盾せず、ブランドが掲げる言葉に説得力が生まれています。
白い正方形に収めた筆文字ロゴ
写真の中央には、うっすらと白く抜いた正方形のパネルが重ねられ、その中に筆文字のロゴとアルファベット表記が配置されています。写真の情報量が多い場所でも文字が沈まないように、額縁のような枠で読みやすさを確保する工夫です。
ロゴそのものは筆文字と欧文の二段構成になっており、和の雰囲気を保ちながら現代的な印象も両立させています。画面の左上には紺色の楕円に白い筆文字を抜いたシンボルが置かれ、背景の写真が変わっても位置と色が動かないため、ブランドの目印として安定して機能しています。
スクロールを誘う控えめなサイン
ファーストビューの右下には、下向きの矢印を収めた小さなボタンが置かれています。派手な動きに頼らず、この先に続きがあることだけを静かに知らせる作りで、写真の世界観を邪魔していません。
ページを読み進めると、画面の右側にはページ上部へ戻るための矢印も現れます。縦に長い1ページ構成では現在地を見失いやすいため、こうした最小限の補助が回遊のしやすさを支えています。
縦書きと余白でつくる和のトーン＆マナー
このサイトの世界観を決めているのは、配色と文字組みの選び方です。使う色を絞りながら、明暗の切り替えと縦書きの導入によって、和の落ち着きと読みやすさを同時に成立させています。ここでは、その具体的な手法を3つに分けて確認します。
暗い写真に白い縦書きを重ねたセクション
ファーストビューの次に現れるのは、しいたけの接写を暗く落とした背景に、白い縦書きの文章を重ねたセクションです。縦組みは横組みよりも視線の流れがゆっくりになるため、じっくり読ませたい紹介文に向いています。行の高さをそろえ、文字の間隔もゆったり取っているので、暗い背景の上でも読みにくさを感じません。
同じ手法は、霊芝を取り上げたセクションでも繰り返されています。全幅の写真の上に白い縦書きを重ねるという型を使い回すことで、長いページ全体に共通のリズムが生まれています。
白い画面へ切り替えて呼吸をつくる
暗い写真のセクションが続いたあとには、白地に切り替わるセクションが挟まれます。筆文字の見出しと中央そろえの短い文章、そして白背景で撮影した商品写真だけを置き、上下にたっぷりと余白を確保しています。
明るい面と暗い面を交互に並べることで、縦に長いページでも単調さを感じにくくなります。要素を詰め込まずに余白で区切る判断は、扱う商材が食品である場合にとくに効果的で、清潔感の演出にもつながっています。
写真から取り出した色だけで配色をまとめる
使われている色は、きのこの茶色、里山の緑、そして文字色の黒と白にほぼ限られています。写真そのものが持つ色をページの配色として採用しているため、装飾で色を足さなくても全体のまとまりが崩れません。
ロゴの紺色は、そのなかで数少ない差し色として働いています。面積を小さく保つことで写真の邪魔をせず、それでいてブランドの記号として記憶に残る使い方になっています。
コンテンツの並べ方に見る情報設計
縦に長い1ページの中で、どの順番に何を見せるかという判断も、このサイトの見どころです。きのこそのものの紹介から作り手の考え方、更新情報、事業の全体像へと段階的に並び、読み進めるほど理解が深まる流れになっています。
見せる順序が作り手の物語になっている
ページは、育てているきのこの紹介から始まり、原木栽培と里山を守る考え方、きのこを使ったおばんざいの案内へと進みます。買ってもらうための情報より先に、どこで誰がどのように育てているのかを伝える順序になっており、読み手の納得感を先につくる設計です。
後半では、杉林を見上げた写真や山で作業をする様子の写真が全幅で配置されます。文章で背景を説明する代わりに現場の写真を挟むことで、里山との関わりが実感として伝わってきます。
お知らせとブログを左右に分けた2カラム
更新情報のエリアは、画面を左右に二分し、片側にお知らせ、もう片側にブログを並べた構成です。それぞれのカラムには背景写真が敷かれ、左はカラー、右はモノクロと質感を変えているため、2つの枠の役割が違うことが直感的に分かります。
各カラムにはサムネイルと日付、記事タイトルをまとめたカードが置かれ、左右の矢印で切り替えられる形になっています。性格の違う情報を1つのリストに混ぜず、並べて見せるという整理の仕方は、更新型のコンテンツを持つサイトの参考になります。
事業の全体像を示す横並びのタイル
ページの終盤には、キノコ事業・農業事業・不動産事業といった事業領域を、写真タイルの横並びで示すセクションがあります。写真の上に白文字のラベルを載せただけの簡潔な作りで、説明を読まなくても事業の幅がつかめます。
複数の事業を持つ会社のサイトでは、情報を並列に置くほど焦点がぼやけがちです。このサイトはきのこを主役に据えたまま、全体像は終盤でまとめて示すという順序を選んでおり、主題を守りながら会社の姿も伝える構成になっています。
ボタンと導線のデザイン
導線の作り方にも一貫したルールがあります。ボタンの形と色をそろえたうえで、性格の違う導線だけ意図的に見た目を変えており、読み手を迷わせずに選ばせる工夫が読み取れます。
ダークグレーで統一したボタンと、色を変えた例外
本文の途中に置かれたボタンは、角を丸めない横長の矩形にダークグレーを敷き、中央へ白文字を置いた形でそろえられています。写真が主役の画面でも輪郭がはっきりするため、押せる場所だとすぐに判断できます。
一方で、住まいと暮らしを支えるサービスを案内する部分だけは、青いボタンが使われています。直前に置かれたイラスト主体のビジュアルとあわせて、きのこの流れとは性格の異なる案内であることが視覚的に区別されています。
ヘッダーを絞り、フッターに主要メニューを集約する
ヘッダーに常時見えているのは、左上のロゴと右上の小さな英字リンクだけで、ファーストビューの写真を遮る要素がありません。第一印象を優先した思い切った判断です。
その分、フッターには会社概要・商品ご案内・Instagram・WEBSHOP・BLOG・不動産事業・お問合せが横一列に並び、必要な入口がまとめて置かれています。さらにその上には、原木を手にした人物の写真を背景にサイト名とWEB SHOPへ進むボタン、そして各SNSのアイコンが配置され、読み終えた人の次の行動を受け止める場所として設計されています。
食のブランドサイトを作るときに参考になる考え方
ここまで見てきた手法は、生産者や食品を扱う事業者のサイトに広く応用できます。特別な仕掛けを用意しなくても、写真と余白の扱い方を決めるだけで印象は大きく変わります。
写真の質がデザインの印象を左右する
商品の写真は、明るさや背景をそろえて撮るだけでも一覧性が上がります。このサイトのように、白背景で撮った商品写真と、現場の空気が伝わる情景写真を役割で使い分けておくと、伝えたい内容に応じて写真を選べるようになります。
撮影の時点でトーンをそろえておけば、あとから装飾で辻褄を合わせる必要が減ります。写真素材の準備はデザインの前工程として、早い段階で計画しておきたい部分です。
情報を足すより、削って世界観を守る
伝えたいことが多いほど、文章もボタンも増えていきます。しかし要素が増えるほど視線は分散し、結果として何も印象に残らない画面になりがちです。
このサイトは、1つの画面に置く要素を絞り、続きはスクロールで見せるという判断を徹底しています。1つのセクションで1つのことだけを伝えるという原則は、サイトの規模を問わず取り入れやすい考え方です。
まとめ｜京のきのこ処 京茸～きょうたけ～のサイトから学べること
京のきのこ処 京茸～きょうたけ～のサイトは、原木しいたけの質感と京北の里山の風景を主役に据え、使う色と要素を絞ることでブランドの世界観をまっすぐ伝えています。縦書きと余白の使い方、明暗を交互に並べる構成、そして統一されたボタンの設計は、食のブランドサイトを検討している方がそのまま参考にできる手法です。
また、きのこづくりと並行して、京都で実家の見守り訪問サービスまで手がける取り組みもサイト内で案内されています。写真の見せ方や導線の作り方は実際の画面で確かめるほうが理解しやすいので、デザインの参考として一度ご覧ください。
