Design revamp #2

前回に引き続きサイトデザインの変更について説明します。今回はデザイン変更で新たに取り入れた機能についてまとめています。

UI and UX.

今回は、デザイン変更を行なった際に追加した機能について簡単にまとめてみます。UIやUXという言葉は理解していましたがこれまで自身のサイトに当てはめて考えたことはありませんでした。今回デザインを変更していく際、閲覧してくれる方の利便性を考えていくと結果的にこの言葉に辿り着くと感じています。

当サイトはすべてのページに日本語/英語を用意しています。言語の切り替えはトップメニューで行うようにしていましたが、トップメニューだけでなくすべてのページの上部に言語切り替えのリンクを設置しました。当ページのタイトルの下にも設置されています。

この機能もBootstrapのbtn-groupのクラスを使い、該当言語にaria-currentのpageを指定しています。私のページはDrupal本来の翻訳機能ではなく、コンテンツタイプで日本語と英語をそれぞれ用意する形で2言語に対応しています。これはDrupal利用当初にDrupalの機能の理解がまだ浅い状況で考え出した方法であり、本来同一のコンテンツタイプで翻訳機能を使用した方が構築的にも後の管理も優れています。

将来的に修正

このようなDrupal利用当初に構成した翻訳機能の使い方についての修正項目などDrupalが用意する機能の理解が進んだことで気がついた修正点があるので今後LightsailからEC2に載せ替えを行うタイミングで修正することを考えています。

言語の切り替え

<div class="btn-group mb-3">
   <a class="btn btn-outline-dark btn-sm active" href="#" aria-current="page">Japanese</a> <a class="btn btn-outline-dark btn-sm" href="/en/en-creation/learn032">English</a>
</div>

以下のように表示されます。

当サイトの記事の大半は私がDrupalに触れ遭遇した事態への対処や面白いと感じたことを題材にしています。主要な目的が備忘録として残し同じような事態に遭遇した方の参考になればと考え記事を作成しています。ただ内容的に長く読みにくい記事となってしまいます。

記事が長いので、内容を理解するために記事を戻って読み返す機会が多いのではないかと考えています。読み返す際にページ内の動きがブラウザのスクロールバーのみでは使いにくいので、記事の見出しにアンカーリンクを設置しページ内の移動をしやすくするためにジャンプリンクを設置しました。設置したアンカーは、フッターに固定メニューでもリンクを設置しています。

2-1.アンカーとジャンプリンク

アンカーにdivを使用しclassの設定を行なっているのは、トップメニューがfixed-topを指定しており、単純にアンカー設定をするとページ上部がトップメニュー下に隠れてしまいます。anchorクラスにTopマージンを指定し、アンカーのリンクでページが表示された場合でもTopメニュー下に隠れないようしています。

ジャンプリンクも言語切り替え同様Bootstrapのbtn-groupのクラスを使っています。設置もクラスの指定をしてアンカーリンクを設定するだけなので非常に簡単に設置出来ます。

アンカーは見出しに指定していますが、別途ジャンプリンクを設置したのは、見出しから手前の見出し、次の見出しに移動可能とする為と、ここにNoを指定することで、後述するグローバルナビゲーションの代わりとなるフッターメニューからページ内の移動を可能とする機能に見出しをNoとして認識できるという理由があります。

アンカーとジャンプリンク

// 見出しにアンカーを設置
<div class="anchor">
   <div class="anchor_pad" id="an-link">
       <h3>
           アンカーとジャンプリンク
       </h3>
   </div>
</div>
// ジャンプリンク
<div class="btn-group mb-3">
   <a class="btn btn-outline-secondary btn-sm" href="#">&lt;&lt; Prev</a> <a class="btn btn-outline-dark btn-sm active" href="#1" aria-current="page">Topic #01</a> <a class="btn btn-outline-secondary btn-sm" href="#2">Next &gt;&gt;</a>
</div>

以下のように表示されます。アンカーにTopマージンが設定されているのでスペースが空いています。

Tec系の記事を見るとサイドメニューに記事の見出しのリンクを設置しているのを良く見かけます。これは通称グローバルナビゲーションと呼ばれ、記事内の見出しをガイドにサイドメニューのリンクから記事内を移動出来る機能になります。今回話題にしているBootstrapのドキュメントのページを見ていただくと、ドキュメントの右側に記事内の見出しのリンクが一覧で並んでいますがこれがグローバルナビゲーションになります。

私の記事にもこのグローバルナビゲーションを設置することを考えていました。グローバルナビゲーションは通常モバイルで表示するとバーガーメニューなどに変換されTopメニューに移動します。今回デザイン変更をした際に考慮した事案にバーガーメニューを展開するアクションが煩わしく感じるという事があり、固定メニューの表示を使用していくことが良いのではと考えています。

サイドメニューに見出しを並べる際に、見出しの付け方が重要になります。私の記事で悩むのが見出しのタイトルになります。記事内容を端的に表現したい場合、どうしても文章的なタイトルになってしまいます。そうなると、見出しが一行では収まらないケースが多くなりせっかくのサイドメニューに設置したグローバルナビゲーションが非常に見難く不恰好になってしまいます。

代替案

このような理由から、サイドメニューにグローバルナビゲーションを設置する代わりにもう少し使いやすい代替となる機能はないかと考えます。この代替案としてフッターに固定メニューを表示してページ内を移動できるリンクを並べる形にします。

問題は、リンクを並べた固定フッターの面積が多くなると記事が読みにくくなってしまいます。そこで前項の見出しで説明した記事に設置するアンカーに簡単なナンバーを振り、フッターのリンクにこのナンバーをリンクとして設置することでスペースを取らないフッターリンクの形を取っています。

試験的なインターフェース

初めてサイトをおとづれた方には何の機能かがわかりにくいというデメリットはありますが、一度リンクをクリックすると機能は単純なのですぐに理解できます。複数の記事を読んでいただいたり、リピートされている方には当サイトのインターフェースとして認識しやすい機能なので、この形での設置を行なっています。

この機能は、通常のグローバルナビゲーションと見た目が異なる事がありますので、記事を読む方が一見グローバルナビゲーションとしての認識はないと思いますが、利用することで結果的にグローバルナビゲーションに近い形で利用いただけるのではないかと考えています。この機能は試験的に設置していますので別の良いインターフェースが考えられたら変更していくかもしれません。

Sticky bottom

 上記で説明したグローバルナビゲーションの代わりになるフッターメニューは、Bootstrapのnavコンポーネンツを使用しSticky Bottomのクラスを指定します。私の記事では、Sticky Bottomは固定フッターとして機能しますが、記事最後で、通常のフッターとして機能し以降のスクロールでは表示されなくしています。これはDrupalの機能であるブロックレイアウトを使用して、関連記事のViewをページ下部に表示される設定をしているので、コンテンツにフッターを直接書き込む事でコンテンツの表示が完了したタイミングで固定フッターではなくなります。

頭の体操というかパズルのような発想ですが、Drupalが持つ機能とBootstrapが用意するコンポーネンツの機能を組み合わせて使用する事で実現している機能であります。

私のサイト構成にこのような発想で構築した箇所は多数あります。機能としてや、利用方法として正しくはない方法ではありますが、実利用としては成り立つ考え方となります。

グローバルナビゲーションの代替

<nav class="navbar navbar-dark sticky-bottom p-1 pb-0" style="background-color:#ffffff;">
   <div class="container-fluid">
       <p class="menu">
           Topic : <a class="button_anchor" href="#">Top</a> <a class="button_anchor" href="#1">#01</a> <a class="button_anchor" href="#2">#02</a> <a class="button_anchor" href="#3">#03</a>
       </p>
       <p class="menu">
           Article : <a class="button_Article" href="/term-article-drupal">Drupal</a> <a class="button_Article" href="/term-article-web">Web</a> <a class="button_Article" href="/term-article-macbook">Mac</a> <a class="button_Article" href="/term-article-aws">AWS</a>
       </p>
   </div>
</nav>

以下のように表示されます。

コードではsticky-bottomクラスを指定していますがここの表示は指定していません。

Topページや記事のリストを一覧表示するViewやタクソノミーにHeroコンテンツ（ページ上部にフルスクリーンの画像とタイトル）を設置しました。元々テキストベースのサイトでしたがサイトのイメージやブランディングをしてみようと考えて設置しています。背景画像は私の写真なのでブランディングという効果はないのですが、Webデザインの一環として設置しています。効果ははっきり言って薄いと思いますが初めてサイトを訪れた方にサイトイメージを持ってもらう効果にはなっているのではと考えています。

Topページ

Viewで作成した記事のリスト

タクソノミーで作成した記事のリスト

今回設置したHeroコンテンツもとりあえず設置したものなので、今後変更していくかもしれません。本来サイトの記事内容と合った写真を使うのが一般的で、良く見るのがライセンスフリーのストックフォトを使用するケースではないでしょうか。

ライセンスとフルオリジナル

私のサイト運営の基本概念に、素材を含めすべてオリジナルコンテンツとしライセンスを自身が持つということがあります。サイトで使用する写真も自身で撮影し自身や自身の所有物のみの使用としています。当然記事もすべて私が感じた事を私の言葉で書いています。自身の写真は三脚を使いセルフィーにて撮影したものになります。

今回のHeroコンテンツも私自身の写真を使用することで私がライセンスを持つフルオリジナルの画像を使っていますが、例えばDrupalの記事に私の写真が関連しているか？と考えると微妙です。この辺りは一つのデザインコンセプトに関わるテーマでもあるので、何か関連する画像を自身で作成する方法を考えていきます。

実際の設置

Heroコンテンツというと何か特別感がありますが、フルスクリーンに近い画像にテキストをオーバーライドさせた領域であるのでそれほど難しく考える必要はありません。

CSSの機能とBootatrapに用意されるクラスを利用し作成しています。CSSやHTMLのタグなどは記事が長くなってしまうので機会があれば紹介していきたいと考えています。

Drupalの標準機能を使用した設置方法で構築しています。方法としてはHeroコンテンツのブロックを用途に応じて複数作成し、ブロックレイアウトで必要に応じて呼び出し表示しています。一つ注意点として、私のサイトはトップメニューが固定されています。このことでトップマージンを考えないと画像の一部がトップメニューに隠れてしまうことがあります。CSSの基本設定でBodyなど基本レイアウトに関わるトップマージンを指定していますが、通常の記事とHeroコンテンツ、アンカーを使用したページなど、各コンテンツでTopマージンを調整する必要があります。これをしないと、タイトルや見出しが隠れてしまいます。

今回設置したHeroコンテンツのトップマージンの指定は、トップマージンに加えトップメニューの高さと同様になる一行のコメントを指定し高さを調整する形で対応しています。

私のサイトが、学習しながら随時変更を行い構築しているため、過去に設定したものや過去に構築したものと新しく追加したものでこのような微調整が必要になってしまいます。これは私の知識が増えサイト構築に反映させられる要素を随時追加してしまっている反省点でもあります。私のサイトはステージング兼公開を同時にしてしまっている弊害でもあります。

現在AWSのLightsailとBitnamiのDrupalのインスタンスでサイトを構築しています。近い将来EC2とRDSを使用した形への移転を考えていますので、その時に今行っている反省事項を考慮し、最初からサイトの設計をある程度行い公開する形式を定めた上で公開する形にしていきたいと考えています。

Conclude

2記事に渡りデザイン変更について書いてきました。Drupalを理解しながらサイト構築を進めてきたのでサイトデザインを後回しにしてしまい今回デザインに目を向けたのは良い機会になったと考えています。ただ現状のデザインが完成系ではなくもう少し見やすく使いやすいデザインはあると考えていますので、気になった箇所は随時変更していきます。

今回、変更点の説明やデザインに使用するBootstrapの簡単な使用方法などを説明しています。Bootstrapのコンポーネンツの導入やデザインに関わるCSSの記述などは記事が長くなってしまうので簡単に済ませていますが、UI/UXに関わる重要な事ですので、機会があればもう少し詳しく解説していきたいと考えています。