Tree Doctor ・ Web Design
このような、樹木医の事務所のホームページを作りました。
題材は、東京・三鷹で木の診断と治療をしている「樹木医事務所 ミキノネ」。架空の事務所です。紹介で来た方が確かめに開いたとき、どんな人が、何を、いくらで、どう進めてくれるのかが一度で分かるように組みました。木を診る仕事がいちばん目に入る並びにしてあります。
見ていただけるものは 2 段あります。1 つ目は色味。文章とページの並びは同じまま、色と書体を 5 通りに変えました。2 つ目は表現。ページの組み立て、ナビの置き場所、写真と文の関係から作り分けたものが 3 つあります。どれも全ページ動きます。
1Colors
色味。同じ中身で、5 つの色と書体。
文章・写真・ページの並びは 5 つとも同じで、変わるのは色と書体、写真の角の形です。画面の絵を押すとその場で動くサイトを見られます。「サイトを開く」なら新しいタブで開きます。サイトの中のメニューからも見た目を切り替えられます。
2Layouts
表現。組み立てから作り分けた 3 つ。
色を差し替えたものではなく、ページの組み立て・ナビの形と置き場所・写真と文の並べ方から、それぞれ別に作りました。HTML も CSS も 3 つで共有していません。中身（事務所の情報・料金・事例）は色味と同じです。
余白で品を出す
老舗の品と余白
帯のないヘッダーに、左上の小さな項目の格子。トップは全面の大木の写真が、下へ送るとアーチ形の窓に縮んでいきます。短く改行した文のまわりに大きさの違う写真を散らし、見出しを節ごとに中央・左・右へ振ります。白と生成りをゆるやかにつないだ組み方です。
- 送ると写真が窓に縮むトップ
- 文のまわりに散らした写真
- 品書きのように並べた「こんなときに」
写真で読ませる
自然の中の明るさ
背景が固定の舞台になっていて、読み進めると写真の場面と淡い色面の章が入れ替わります。帯のヘッダーは無く、ナビは画面の四隅に。角を丸めた大きな写真の下に、名前と説明を細い線で分けた 2 段組みを重ねていきます。
- 写真と色面が入れ替わる背景
- 四隅に置いたナビと丸い相談ボタン
- 文字を置かない全画面の写真の場面
1 本の線でつなぐ
時を重ねたクラシック
画面の中ほどに大きな欧文の一言、そこから細い縦線が下へ伸びて縦長の窓の写真へつながります。ページの中央を 1 本の線が通り、暗い帯への切り替え、段違いの 2 列のアルバム、組み写真が続きます。経歴や依頼の流れも、この線に沿って左右に振っています。
- ページの中央を通る 1 本の縦線
- 暗い帯と段違いのアルバム
- 横に流れる仕事の写真の帯
Design principles
このサイトで大事にしたこと。
色味でも表現でも、ここは変わりません。