Webにおけるインターフェースのデザインとは。インターフェース、それは何を意味するのでしょうか？今回は、Webにおけるインターフェースのデザインとはについて書いていきます。インターフェースについて勉強していきましょう。
Webページには、インタラクティブ性があります。クリックやスクロールをしながら「情報を探す」又は「共有する」ことがWebページの特徴でもある訳で、そこでユーザーインターフェースとしての重要性が生まれるのです。
| 結論を先に話ししておきます |
| 街中を歩いている際、普段良く目にするであろう何らかの「サイン」と言うものがあります。その例としては「道路の標識や表示」「トイレの出入り口」「アミューズメントなどの非常口」「デパートや企業などのインフォメーション」などが目に付くかと思います。
これらは文字として説明されていなくても「サイン」で内容が分かるのは、情報を単純に伝えようとしているからではないでしょうか。Webデザインにおける「ボタン」や「ピクトブラム」などのユーザーインターフェースも、これと良く似ています。
つまり文字で書かれていなくても、説明書きがなくても、操作目的が分かるようなデザインのボタンにする必要があると言うことです。実際の「ボタン」を良く見ると「サイン」を表示する為のフレームや支柱、プレートにも、デザイナーの注意が行き届いていることが分かります。
良ければ下記の投稿にも目を通して貰えると幸いです。 |
目次はコチラ
【ボタンとピクトグラムとは(動画付き)】
Webページ上のマウス操作を容易にしている要素の一つが「ボタン」もしくは「アイコン」と呼ばれているものです。それはあなた自身もお分かりだと思います。マウスでクリックしやすいように、ある範囲を持ったリンクが「ボタン」です。
「ボタン」のように、何らかの情報を示した絵文字で、リンクが特に設定されていないものを「ピクトグラム」と呼んでいます。これらはWebページ上に画像として埋め込まれています。その画像にリンクを設定すると「ボタン」になります。
| ピクトグラム(pictogram)は、別の名をピクトグラフ(pictograph)とも呼ばれています。ピクトグラムは、グラフィックやシンボルの典型であり、意味するものの形状を使って、その意味概念を理解させる記号を意味します。 |
ではここで、ピクトグラムのオモシロい動画があるのでご視聴して見て下さい。題して「Breathtaking Pictogram Performance at Tokyo 2020 Opening Ceremony」です。訳すと「東京2020開会式での息をのむようなピクトグラムパフォーマンス」です。
「ピクトグラム」を取り扱っているWebサイトがあるので紹介しておきます。それは「ヒューマンピクトグラム2.0」です。「ヒューマンピクトグラム2.0」には、沢山の「ピクトグラム」を取り扱っています。興味ある方はどうぞ。
| ヒューマンピクトグラム2.0とは |
| 「ピクトグラム」に興味ある方は「ヒューマンピクトグラム2.0」を覗いて見て下さい。
「ヒューマンピクトグラム2.0」は、標識などで使われる「ピクトグラム」を「TopeconHeroes」ダーヤマの好みで拡張し、ストックしていくページです。「ピクトグラム」は「公共交通機関」「バリアフリー」などの標識に使われています。
「ピクトグラム」は、真面目なものが多く、やや面白みに欠けてるので、くだらないポーズなど、多めにバリエーションを増やしていくことにしたようです。特に標識などに拘っている訳ではないので適当に作っているとのことです。 |
「TopeconHeroes」とは、WebデザインやDTPデザインなどを仕事にしている人達に対し、クオリティーの高いデザイン素材を無料で提供しているWebサイトのことを言います。「TopeconHeroes」の使用条件に違反しないようにしましょう。
「TopeconHeroes」では、全てに於いて、デザイン素材の利用が可能です。非商用は勿論のこと、商用利用も無料で使え、使用許可も必要ありません。またクレジット表記も必要なく、手軽にダウンロードして使うことが可能です。
| TopeconHeroesが運営する素材サイト(全て無料) | |||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
【テキストリンクとは】
今更でもありませんが「テキストリンク」とは、HTML文書に於いて、リンクが設定されている文字列のことを指します。別の名を「アンカーテキスト」とも言います。主に、ブログやWebサイト、メールなどに利用されています。
「テキストリンク」は、文字列と設定したURLがリンクしていることから、どのようなページのURLなのかをユーザーに分かりやすく表示しています。また「テキストリンク」は、青文字で表記され、下線が引いてあります。
青文字で表記され、下線が引いてある部分をクリックもしくはタップすると、設定したURLのページが表示されます。「テキストリンク」は、SEO対策の上に於いて、とても重要な要素となっています。
- 念の為、テキストリンクを知らない方もいると思うので載せておきます。下記の図解で「赤色枠」で囲まれている3つのテキストがあります。その3つあるテキストには、それぞれリンクが貼ってあります。
そのテキストを一つ一つ開いていくと、それぞれ別のページへ飛ぶようになっています。
- もう一つ見てみましょう。「緑色枠」で囲まれている中の文字には、リンクが貼ってあります。そのリンクをクリックすると、そのページへ飛びます。
| 「テキストリンク」は、別の名を「アンカーテキスト」とも言います。良く覚えておきましょう。 |
【プルダウンメニュー&(UI/UX)とは(動画付き)】
ワードプレステーマの多くは、メニュー表示に「プルダウンメニュー」を備えています。「プルダウンメニュー」は、プログラミング言語の「JavaScript」によって、実現されていることはご存知でしょうか？
「プルダウンメニュー」は、コンピューターのアプリケーションで、一般に利用されるメニュー方式なので「ユーザーインターフェース」として馴染みがあると言っても良いでしょう。「ユーザーインターフェース」とは何か。
| ユーザーインターフェースとは |
| 「UI」や「UX」と言う言葉を聞いたことがある人はいるでしょう。しかしながら、その意味を知らない人は多いのではないでしょうか？「ユーザーインターフェース」は、即ち「UI」を指します。
「UI」＝このアプリの「UI」は「イケテル」や「UIデザイナー募集」など、最近では、テクノロジー系の記事やデザインに関する話しの中で頻繁に出てきます。ですが、キチンと言葉で説明してみて、と言われると意外と言えないものです。
では「UX」の意味は何でしょうか？「UX」とは「ユーザーエクスペリエンス」の略称であり、その意味は、プロダクトやサービスを通じて得られる全てのユーザー体験を意味しています。一般的には「UI/UX」と呼ばれていることが多いです。 |
ではここで「UI/UX」に関する動画を視聴してみましょう。題して「【5分で理解できる！】UIとUXの違いについてわかりやすく解説！」です。
インタラクティブ・インターフェースの効果について(動画付き)
Webページの大きな特徴は、インタラクティブ性にあると言われています。例えばですが、マウスを動かすと、ページ内に何か変化が起きると言う「仕掛け」そのものに対し、操作している人に次の動作を要求します。
| インタラクティブ性＝「インタラクティブ」とは |
| インタラクティブとは「双方向」を意味する言葉であり、一方的な情報発信ではなく、相互に於いて、情報交換ができるコミュニケーションでの形式を言います。IT業界やマーケティングでは、インタラクティブと言うと、双方向性のある情報発信を指します。 |
これにより、ユーザーを意図したコンテンツに導くことも可能となります。このような「仕掛け」は「CSS」や「JavaScript」などによって実現可能となりますが、ワードプレスでは、テーマに予め実装されているものもあります。
またプラグインで追加できるものまであります。ワードプレスのインタラクティブ性の例としては「Easy FancyBox」による画像表示があります。このプラグインは、商品の画像を大きくして見せることができます。
ページに表示されている小さなプレビュー画像をもっと大きくして見てみたい、と言うユーザーの要求を満足させるものです。このプラグインに興味ある方は、インストールしてみてはいかがでしょうか。
一応「Easy FancyBox」に関する動画を貼り付けておきます。題して「【画像をふわっと表示】Easy FancyBoxの使い方【WordPress プラグイン】」です。
【スマートフォン用のユーザーインターフェース(動画付き)】
あなたもご存知のように、ワードプレステーマの多くが「レスポンシブウェブデザイン」に対応しています。「レスポンシブウェブデザイン」とは、デバイスのモニターサイズに合わせて、適切なページを選択して表示する機能を言います。
スマートフォンでのWebページ閲覧をメインとするWebページほど、小さな画面への対応は重要と言えます。またモニター用のWebページを表示することもできますが、非常に小さいユーザーインターフェースを操作するのは不便です。
ワードプレスでは、基本的にモニターサイズでWebページを作成しておいて、それを小さなサイズにする手法を取ります。この時、メニューは指によるタップ操作に最適化されます。このことを覚えておきましょう。
| 具体的には、大きなメニュー項目を3つほどに限定して表示するか、メニューボタンを表示し、プルダウンメニュー形式にするしかありません。 |
ではこちらも動画を視聴してみましょう。題して「【UIデザイン】UIデザインを効率よく調べられる便利サイトを紹介！スマホアプリやWebのスマホデザインにも使えます」です。
今回は、ここまでとします。Webにおけるインターフェースのデザインとは、はいかがでしたか？内容的には、ある程度の理解はして頂けたはずです。何はともあれ、いろいろ覚えることはとても大事なことです。
あなた自身のスキルアップにも繋がります。スキルアップすると言うことは、あなたが誰かに何かを教えてあげることもできる訳です。そうなると、生徒だったあなたが今度は先生として人に教える立場になる訳です。
