ヘッダーメニューの見栄えをちょっと改良中
昨日から、サイトの「ヘッダーメニュー」の見栄えを少しずつ改善し始めました。まず取り組んだのは、ヘッダーメニューをページ上部に固定して、スクロールしても追従させる設定です。
Cocoonの「ヘッダー」タブから簡単に設定できましたが、この機能はPC限定。スマホではまだ反映されていませんでした。
そこで今日は、次の一歩。Cocoonの「モバイル」タブから、モバイルでもヘッダーを固定できるようにしてみました。
モバイルでもヘッダーメニューを固定してみた！
固定対象にしたのは、モバイル版の7つのボタンです。
- メニュー（4つのカテゴリー）
- ウェブサイト名
- 検索ボタン
- ホームボタン
- シェアボタン
- トップへ戻るボタン
- サイドバーボタン
これらを「ヘッダー・フッダーモバイルボタン」の設定で、上部（ヘッダー）と下部（フッター）に分けて配置します。Cocoonの「モバイル」タブにあるプレビューで見た目を確認しつつ、最後に「モバイルボタンを固定表示する」にチェック。
その結果――モバイルでもヘッダーが固定できました！さらにフッターも固定されるので、7つのボタンを上下に分けて配置でき、見栄えも機能性も大幅アップ。
キャッチフレーズをどう見せるか？
モバイルでは、固定されたヘッダーのすぐ下にキャッチフレーズが表示されます。一方、PCでは、ページのトップにキャッチフレーズ、その下にタイトル、さらにその下にメニュー（4カテゴリー）が示されます。その後、下にスクロールすると、タイトルとメニューが横一列に追従して固定される仕組みです。
つまり、PCでもモバイルでも、まず最初にキャッチフレーズを見せる構成になっています。
このキャッチフレーズは、サイトの顔ともいえるウェブサイトの謳い文句。運営を始めて1か月後にキャッチフレーズを吟味しています。シンプルで、サイト名とのバランスも意識しつつ、記憶に残るフレーズを目指した結果――「良識でマンネリの生活を一新！」に変更しました。このフレーズは、固定追従はしないものの、冒頭でしっかり印象づけられる配置にできたかなと思います。
キャッチフレーズをフッターにも！
キャッチフレーズは固定追従されないので、画面をスクロールしていくと自然と見えなくなります。そこでふと思いつきました。
「キャッチフレーズをフッターにも表示させたらどうだろう？」
ただし、Cocoonの標準設定だけでは、キャッチフレーズをヘッダーとフッターの両方に同時表示することはできません。でも、実は簡単な方法がありました。フッター追記エリアに手書きでキャッチフレーズを書いてしまえばいいんです。
こうすれば、まるで「サブキャッチフレーズ」のように使うことも可能。ヘッダーとは少し違う言葉を置いて、トップとボトムでサイトの雰囲気を変える――なんて使い方もできそうですね。
