Tree Doctor ・ Web Design
名刺の代わりになって、樹木医の仕事がまっすぐ伝わるサイトに。
紹介で来た方や「ホームページはありますか」と聞かれたときに、そのまま見せられるもの。そのうえで、木の診断と治療の仕事がいちばん目に入るように組み立てた、樹木医のホームページのご提案例です。
見ていただくものは 2 段あります。1 つ目は色味のサンプル。文章とページの並びは共通のまま、色と書体を 5 通りに変えました。2 つ目は表現のサンプル。いただいた参考のサイト 3 つの「組み方」を起点に、ページの組み立てから作り直したものが 3 つあります。色は色味から、組み方は表現から、と別々に選んでいただいても大丈夫です。
1Colors
色味のサンプル。同じ中身で、5 つの色と書体。
文章・写真・ページの並びは 5 つとも同じです。変わるのは色と書体、写真の角の形くらい。画面の絵を押すと、その場で動くサイトを見られます。「サイトを開く」で新しいタブに開きます。サイトの中でも、メニューから見た目を切り替えられます。
参考：三次元 The Classic の、時を重ねた落ち着き
年輪
温かみのある灰色にこげ茶。本文まで明朝で、写真は角を立てた、落ち着いたクラシックな見た目です。古い木や庭を大事にする方に。
サイトを開く →2Layouts
表現のサンプル。参考のサイトの組み方から、3 つ。
色を差し替えたものではなく、ページの組み立て・ナビの形と置き場所・写真と文の並べ方から、それぞれまったく別に作りました。中身（文章・写真・黄色の「仮」）は色味のサンプルと同じです。木の写真の一部は雰囲気を見せるために作った画像で、写真の隅に小さく「イメージ」と添えています。
参考：Fujiya1935 の、老舗の品と余白
老舗の品と余白
帯のないヘッダーに、左上の小さな項目の格子。トップは全面の大木の写真が、下へ送るとアーチ形の窓に縮んでいきます。短く改行した文のまわりに大きさの違う写真を散らし、見出しを節ごとに中央・左・右へ振る。白と生成りをゆるやかにつなぐ、余白で品を出す組み方です。
- 送ると写真が窓に縮むトップ
- 文のまわりに散らした写真
- 品書きのように並べた「こんなときに」
参考：glänta の、自然の中の明るさ
自然の中の明るさ
背景が固定の舞台になっていて、読み進めると写真の場面と淡い色面の章が入れ替わっていきます。帯のヘッダーは無く、ナビは画面の四隅に。角を丸めた大きな写真の下に、名前と説明を細い線で分けた 2 段組みを重ねていく、写真で読ませる組み方です。
- 写真と色面が入れ替わる背景
- 四隅に置いたナビと丸い相談ボタン
- 文字を置かない全画面の写真の場面
参考：三次元 The Classic の、時を重ねた落ち着き
時を重ねたクラシック
画面の中ほどに大きな欧文の一言、そこから細い縦線が下へ伸びて縦長の窓の写真へつながります。ページの中央を 1 本の線が通り、暗い帯への切り替え、段違いの 2 列のアルバム、組み写真が続きます。流れや経歴もこの線に沿って左右に振っていく、落ち着いたクラシックな組み方です。
- ページの中央を通る 1 本の縦線
- 暗い帯と段違いのアルバム
- 横に流れる実績の写真の帯
Design principles
このサイトで大事にしたこと。
色味でも表現でも、ここは変わりません。