(承前)

前回はサイトの〈共通仕様〉についてお話ししてきましたが、今回は引き続き、同様の共通仕様であるヘッダー、およびフッターについて続けます。
これらは、どのページでも共通に表れます。

ヘッダー

  • 右肩の「Seach here…」は検索窓です。
    Blogを含め、このサイトの全てが検索対象となります。
  • 中央にはロゴ
    10年前のWebサイト設置を機会にデザインしたものです。
    県立図書館の書棚から書体集を引っ張り出すなどして、検討を重ね、いわゆる隷書体から作られた書体を基に作っています。
    画像処理は、これもその時が初めての活用でしたが、Illustratorでデザインした第1号です。
    旧サイトではえんじ色をベースにしていましたが、トーンを落としたグレーにしています。
    Appe.incのロゴ、リンゴアイコンをレインボーからグレーに変えていったのと同じ経緯というわけです(笑)
  • ナビゲートメニューバー
    左から[Home]、[My Work]、[About]、[Workshop]、[Support]、[Inform]、[Blog]と並んでいます。
    それぞれをクリックすることで対象のページにジャンプします。
    メニューにはその下の階層(サビメニュー)がある場合もあり、その場合はマウスオンで下に新たにメニューが出てきます(ドロップダウンメニュー、などと呼ばれます)
    最大で3階層を持ちますが、マウスが外れると辿れませんので、少し丁寧な操作が必要かも知れません。
    個々のメニューの内容については、フッターにある「サイトマップ」をご参照ください。
  • ヘッダー右のテキスト(画像処理)はサイトタイトル《木工家具の工房 悠》に対し、サブタイトルになります。
    「木の家具に囲まれた 美しく快適な生活空間を !」
    旧サイトから一貫したメッセージですね。

フッター

ここ数年のWebの標準的な構成として、このフッター部分にページ内リンクをあらためて並べたり、Web管理運営者のIDやら、関連サイトのリンク、コピーライト、SNSなどを置くというのが一般的なようです。
これはユーザーが使いやすいようにという配慮もありますが、SEO的な考えもたぶんあるのでしょう。

このサイトでは、あえてbgカラーも変えず、サイトID、コピーライトの他、Blog投稿、コメントのインデックスを並べました。

SNSなどは最近大流行(おおはやり)のようで、個人よりも企業における営業ツールとしての活用が盛んなようです。
興味が無いわけではありませんが、なかなかそこまで管理しきれないだろう、というのがホンネで手は出しておりません。(考えが変わるかも知れませんが……)

数日前、[We Love Wood]というテキストを付けた樹木のアイコンを置いてみました。
これはテキストばかりで堅苦しいのもどうかなと思い、画像を置いて見たのですが、ワンポイント的なアイコンで気に入っています(自分が気に入っても仕方ありませんが 笑)
このWoodアイコン、レイアウトには少し苦労しました。

これは画像におけるテキスト回り込みコントロールのHTMLテクが必要なのですが、こうした作業を通して、少しづつ学習していくわけですね。
50の手習いならず60の手習いで、上達はなかなかですが、意図通りにレイアウトされたりすれば、5歳ほど若返った気分でひそかに喜ぶというわけです(笑)

フッター最下部のにょろにゅろした画像ですが、これはカンナ屑の画像を置いたものです。
邪魔くさい、などと言われているかも知れませんが、まぁ、遊びです。
寸八カンナを良く研ぎ直し、ブラックウォールナットを削り、カメラに納めたわけですが、あまり調子の良いカンナ屑でないところが、かえって雰囲気があって良いと納得の“屑”です(笑)
色調はあまり目立たないように、グレーでマスキングし、トーンダウンさせています。

(この項 続く)