Webサイトのデザインでは、扱う題材に形がないほど、写真や装飾で情報を補いたくなります。堀江利昌様のWebサイトは、その反対の考え方で組み立てられています。生成りに近い明るい背景と広い余白、明朝体を中心にした文字組みだけで画面をまとめ、僧侶であり法律家でもあるという活動の輪郭を、静かなまま伝えています。
この記事では、ファーストビューの構図、配色とトーン、書体と余白の扱い、ページの並び順、ボタンによる導線という順番で、このサイトのデザインを読み解きます。人物そのものを前面に出す個人サイトや、講演や対話のように形の残らない活動を紹介するサイトを検討している方に、参考になる部分が多い作りです。
人物写真と名前で始まるファーストビューの設計
このサイトの第一印象は、写真と名前という二つの要素でほぼ決まります。装飾的な図形も、大きなキャッチコピーの見出しも置かず、誰のサイトなのかを最短で伝える構成を選んでいるためです。ここでは画面上部の構図と、その直下に置かれたボタンの役割を順に見ていきます。
左に写真、右に名前を置く非対称の構図
画面上部は左右で役割がはっきり分かれています。左側の広い面積を横長の人物写真が占め、右側は大きく余白を取ったうえで名前だけを配置しています。左右を均等に割らずに写真側を厚くした配分によって、視線が自然に写真から名前へ流れます。
写真は室内で椅子に腰かけた姿を写したもので、背景には木製のはしご型シェルフ、書籍、白い花器、テラコッタ色の鉢と観葉植物が並びます。人物はネイビーのジャケットに白いシャツを合わせており、背景の穏やかな色みと重なって、堅すぎず崩れすぎない印象を作っています。屋外や事務的な空間ではなく、生活感のある室内を選んでいる点も、対話を軸にした活動の紹介とよく合っています。
主要ページへ進む3つのボタンをその場にまとめる
名前の下には、角の丸いピル型のボタンが縦に3つ並びます。ラベルは日本語と英字を横に併記した形で、プロフィール、活動、お問い合わせという主要な行き先がまとめられています。
ヘッダーのグローバルナビゲーションにも同じ行き先が並んでいますが、視線が集まる名前のすぐ下へもう一度置くことで、画面の上部まで戻らずに次のページへ進めます。ボタンは細い枠線と薄い背景で作られており、色で強く主張しないぶん、写真と名前の存在感を邪魔していません。
生成りを土台に淡い色を差す配色設計
配色は、背景と文字と差し色という3つの層で整理すると理解しやすい作りです。画面全体をひとつの明るい色でまとめたうえで、注目させたい箇所にだけ色を置いています。ここでは基調色と差し色の使い分けを確認します。
背景と文字のコントラストを抑えた基調色
背景は白そのものではなく、わずかに黄みを含んだ生成り色です。文字も真っ黒ではなく濃いブラウン寄りの色で、コントラストをほんの少しだけ抑えています。この組み合わせによって、画面の明るさを保ちながら、読んだときの刺激が強くなりすぎないように調整しています。
最下部のフッターだけは濃いブラウンの帯で塗られており、明るい面が続いた画面の終わりをはっきり示します。上から下までほぼ同じ明度で進み、最後に一段だけ暗くなる流れは、長い一枚ページの区切りとして分かりやすい処理です。
差し色は告知のバナーとボタンに限定する
ファーストビューの下には、淡いクリームイエローで塗られた横長のバナーが置かれています。手書き風の文字でまとめられた「途中のじかん相談室」のロゴが左寄りに入り、右側には短い説明の一文と、サーモンピンクの丸みのあるボタンが並びます。
ページ全体を通して強い色が出てくるのは、この部分だけです。基調色を抑えているため、面積の小さな差し色でも十分に目立ち、いちばん見てほしい案内へ視線が集まります。色数を増やさずに優先順位を作る方法として、分かりやすい例だといえます。
明朝体と余白がつくる落ち着いたトーン
このサイトのトーンを決めているのは、色よりもむしろ書体と余白です。太いゴシック体で語気を強めるのではなく、細い明朝体と広い空白によって、読む速度そのものを調整しています。見出しの型と文字組みという2つの点から見ていきます。
英字の大見出しに日本語の小見出しを添える型
セクションの見出しは、NEWSやNOTEといった英字を大きなセリフ体で置き、その右横に日本語を小さく添える型で統一されています。英字がまず形として目に入り、日本語が意味を補うという役割分担です。
ヘッダーのロゴにも同じ考え方が使われています。サイト名の下へ細い罫線を引き、その下に英字の肩書きを小さく置くことで、名前と立場を一組の要素として見せています。どのセクションでも同じ型が繰り返されるため、ページを読み進めても構成を見失いません。
字間と行間を広げて読む速度を落とす
ファーストビューの名前は、一文字ずつの間隔を大きく開けた組み方で、上には小さな読み仮名が添えられています。字間を広げると1文字あたりに視線がとどまる時間が長くなり、ゆっくり読ませる効果が生まれます。
本文や説明文の周囲にも十分な余白が確保されており、セクションとセクションの間隔も広めに取られています。要素を詰め込まないことで、写真や見出しがそれぞれ独立して見え、内容の切り替わりが自然に伝わります。
縦一列で読ませる情報設計
トップページは、上から下へ順に読んでいくだけで全体像がつかめる並びになっています。複雑な階層を作らず、必要な入口を1本の流れの中へ配置している点が特徴です。ここでは各セクションの順番と、その見せ方を確認します。
更新のあるNEWSとNOTEを中ほどに置く
バナーの下にはNEWSが置かれ、3枚のカードが横並びで表示されます。各カードは写真、小さく下線の付いたカテゴリ名、タイトル、日付という順に積み上げられており、内容の種類と新しさが一目で分かります。カードの下には中央揃えで「Read More」のボタンが置かれ、一覧へ進めます。
続くNOTEも同じ3カラムで構成され、サムネイル領域、タイトル、丸いアイコン付きの署名という3層でまとまっています。NEWSとNOTEでカードの寸法と余白をそろえているため、似た形のセクションが2つ続いても画面が騒がしくなりません。更新される情報を中ほどに置く並びは、活動が続いていることを示す構成として機能します。
PROFILEとWORKを2枚のパネルで並べる
更新情報の下には、PROFILEとWORKという2枚のパネルが左右に並びます。どちらも淡いグレーの背景に英字の見出しを中央へ置き、その下へ小さなボタンを添えるという同じ作りです。
並列に置くことで、経歴と活動内容のどちらから読んでもよいという関係が視覚的に伝わります。ファーストビューのボタンと同じ行き先をここでも用意しているため、ページを読み進めた読者がその場から詳細へ移動できます。
同じ形のボタンを繰り返す導線設計
このサイトのボタンは、置かれる位置が変わっても形が変わりません。共通の部品を使い回すことで、押せる場所が直感的に分かるようになっています。部品の統一と、最後に置かれた着地点について見ていきます。
ピル型のボタンを共通部品として使い回す
ファーストビューの3つのボタン、各セクションの「Read More」、PROFILEとWORKのボタン、そして問い合わせのボタンは、いずれも角を丸めたピル型で、細い枠線と控えめな背景という同じ体裁です。色が変わるのは告知バナーの中のボタンだけで、その差がそのまま優先度の違いを表しています。
最後にCONTACTを置いて着地点をつくる
ページの最下部には、横幅いっぱいの淡いパネルでCONTACTのセクションが置かれています。中央に英字の見出し、その下に1行の案内文、さらにボタンという縦の並びで、迷う余地のない構成です。
上から順に読んできた読者が最後にたどり着く場所へ問い合わせの入口を置く流れは、講演や対話の依頼のように、内容を理解したうえで連絡したい相手に向いています。フッターは著作権の表示とプライバシーポリシーへのリンクだけにとどめ、最後まで余計な要素を増やしていません。
サイトから読み取れる堀江利昌様の活動
落ち着いたデザインのトーンは、掲載されている内容とも一致しています。ここでは、サイトで確認できる経歴と活動の柱を整理します。
僧侶と法律家という二つの立場
堀江利昌様は、早稲田大学法学部を卒業し、同大学院の法務研究科を修了しています。大学に在学していた時期に仏門へ入って僧侶となり、司法試験に合格したのち、2013年から2017年にかけては弁護士としても活動していました。法律の実務で争いや葛藤の場に数多く立ち会うなかで、制度や正解だけでは扱いきれない迷いの時間の大切さを実感し、30歳を迎えた節目に弁護士登録を抹消して、僧侶としての道を選んでいます。
2018年からは、東京都港区にある浄土宗大本山増上寺で、文化財の大規模な改修事業などに携わってきました。2024年には事務所を設立し、現在は講演や対話、執筆を通じて活動しています。サイトを運営するのはホリーズ合同会社で、東京都港区南青山3丁目1番36号青山丸竹ビル6Fに所在地を置いています。
講演と対話と執筆という3つの柱
WORKのページでは、活動が3つに整理されています。いずれも言葉を扱う仕事であり、サイト全体の静かなデザインとも重なります。
- 講演と講義では、これからどう生きるかというキャリアの話や、争いを乗り越えるための考え方を扱っています。
- 対話では、哲学対話などの手法を用いながら、日常とは違う進め方で自分自身の言葉を探す時間を作っています。
- 執筆では、講演や対話を通して考えたことを、文章として発表しています。
このほかに、寺院や公益法人の運営を支える活動や、企業に対する倫理面での助言にも取り組んでいます。NEWSには、高校生との座談会に講師として参加した記録や、ブータンから僧侶を増上寺へ招き、僧侶をどう育てるかについて意見を交わした報告などが並び、活動の幅を具体的に読み取れます。
まとめ
堀江利昌様のWebサイトは、生成り色の背景と明朝体、そして広い余白という限られた要素だけで組み立てられています。強い色を使う場所を告知バナーの一か所に絞り、同じ形のボタンを繰り返して導線をそろえることで、読み手の負担を増やさずに必要な入口へ案内しています。
写真と名前で始まり、更新情報、経歴と活動、問い合わせという順に降りていく並びは、人物そのものを見せる個人サイトの型として参考になります。言葉にしにくい問いを扱う活動を、落ち着いた画面のまま伝えたい場合の手本になる一例です。コーチングにも通じる対話や仏教の視点に関心のある方はこちらからご覧ください。
