【Webページ】h2タグ_見出しデザイン(見出しバー)の表現と変化

目次


見出しデザイン(見出しバー)とは

「見出しバー」は名称が示すように、バー(棒状)の形状をした、主に「h2タグ」を表現するWebページのパーツで、
古くからケータイサイトページの各コーナーを仕切る「コーナー名」を表示してきました。

過去、ケータイサイトで使用されてきた際は、

・HTMLで塗りつぶされた面に文字を乗せる
・画像でリッチ表現してサービス世界観を演出

など、過剰表現が必要な対象でした。
※一部では「メニューバー」と呼ばれることもありました

過去と現在の表現の違い

そんな「見出しデザイン(見出しバー)」は現在では過剰表現する必要がなくなりました。

Webページ_見出しバー_表現変化

携帯電話(ガラケー)時代は端末ディスプレイの解像度が,

 横240px
 高さ320px

程度しかなく、
画数の多い漢字を表現すると、1行は全角10文字程度になってしまい、一画面の文字表示は字間/行間ともに密する必要がありました。

※携帯電話(ガラケー)は、1画面分をスクロールさせるには、画面中の要素分「↓ボタン」を押すアクションが必要

携帯電話(ガラケー)の画面

下の図のように、現在のスマートフォン向けサービスで見られる見出しバーの表現(下線だけなど)では、コーナーの区切りが分かりづらくなります。

Webページ_見出しバー_表現変化

理由は、低解像度による表現力の弱さとディスプレイの大きさ自体が2.2インチ程度と、現在の普及スマートフォン画面サイズと比べて半分以下しかないためです。

Webページ_見出しバー_表現変化

それでは、サンプルページ情報をスマートフォンに最適化させていくとどう変化するか確認していきましょう。

スマートフォンの画面

文字の大きさはそのままに置き換えてみます。

Webページ_見出しバー_表現変化

端末ディスプレイサイズと解像度が飛躍的に上がっているので、十分な余白もとることができます。

十分な余白追加/文字サイズ最適化

文字サイズも、表示用途/優先度によって小さく表示できるようになったので適応させます。

※ページスクロールは指先一つのワンアクションで可能

Webページ_見出しバー_表現変化

見出しバーの上下に十分な余白が確保できたので、情報量が凝縮したなかでの視認性の確保表現が必要なくなりました。

見出しバーの優先度(表現)を下げる

見出しバーの背面塗りつぶし表現は過剰表現になったので、塗りの面積が狭く主張が弱くなる下線表現に変更します。

Webページ_見出しバー_表現変化

いまどきの表現になってきました。

色の強さを最適化

さらに、
小さい画面では必要だった色の強さとコントラストの高さも過剰表現になるので、中間色に変更してバランスを取ります。

Webページ_見出しバー_表現変化

これまで見てきた強い色の説明イメージから極端に薄くなったので、弱くなった印象を受けますが、十分な余白と画面の大きさもあり見れる画面を維持しています。

さらに、いまどきの表現になってきました。

規則性を崩して自由な空間表現に

最後に、レスポンシブでPC表示などの大画面に表示した際の表現について、余白を活かし、不規則性をレイアウトしてみます。

シンプルな画面構成にゆとりと安心感が付加されました。

Webページ_見出しバー_表現変化

今回、説明上やり過ぎてる表現もありますが、過去の小さい携帯端末と現在の大画面スマートフォンでは、表現の基準線がそもそも違います。


さいごに

今回は「見出しバー」をピックアップ題材として現在使用できるようになった表現の変遷を紹介しました。

注意が必要なのは、

・十分な画面の大きさ
・十分な画面解像度

の恩恵による必然的な変化なので、決して流行表現ではないことです。

適切な余白の確保なくして今回の表現は成り立ちません。

次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。

初心者向け 失敗しないプロトタイピング|共有のコツ

こんにちは!今回のテーマは「初心者向け 失敗しないプロトタイピング|共有のコツ」です。

プロトタイピングツールを使ってWebサイトやアプリのプロトタイプを共有する際に起こりがちな失敗と回避方法をご紹介します。
このコツを押さえることでプロトタイピングをより効率的に行うことが出来ます。


プロトタイピングツールを使う時のコツ3選

プロトタイピングツールを使う時のコツは大きく分けて3つです。
「実機確認」「回遊できるようにする」「説明しすぎない」です。


実機確認

プロトタイピングツールを使って確認する時は、必ず実機確認を行ってください。
PC向けならPCで、スマホ向けならスマホでプロトタイプを確認します。スマホの場合は、可能であれば比率の違う複数の端末で確認するのが望ましいです。

どうして実機確認が必要なのかと言うと、実機だからこそ気が付けるポイントがあるからです。
ファーストビューやスクロールした時の印象や要素1つ1つのサイズ感など、本番環境と同等の状態で見ないと確認の意味を成さないことも…

よくある失敗が、プロトタイプを確認するためにメールでURLを共有した際、スマホ向けのページなのにPCでしか確認をしないケースです。
PCでも大枠のデザインや遷移の確認は出来ますが、実機で見た時の細かいニュアンスまでチェックすることが出来ません。

これを回避するために、プロトタイプを共有する最初の段階で、実機で確認するようプロジェクトメンバーに明確に伝えておいた方が良いです。


回遊できるようにする

ページ内を回遊するためのリンクを設置したり、目次ページを作ってください。

ページ数が多い場合、遷移に行き止まりがあったり、見たいページにすぐ遷移出来ないと、確認し辛くストレスになってしまいます。
それを防ぐために、最初のページに戻るリンクや目次ページを作り、回遊しやすいようにします。遷移に行き止まりを作らないようにするイメージです。

最初のページへ戻るためのリンクはヘッダーに仕込んだり、他のUIを邪魔しない形で設置すると分かりやすいです。
また、目次ページはページの項目(トップページ、会員登録、お問い合わせなど)が多い時に有効です。ボタン風にしても良いですし、箇条書きのテキストにリンクを付けるだけでも十分です。


説明しすぎない

プロトタイプの遷移やコンセプトについて説明しすぎないようにして下さい。
何故かと言うと、サービスに初めて触れる顧客と同じ立場に立つ必要があるからです。遷移を丁寧に説明しすぎて、UIチェックを阻害しないことが目的です。
顧客は何も知らない状態でサービスに触れるので、同じ立場になって考えないと適切なプロトタイピングは出来ません。

よくある失敗が、「このリンクを押すとCVページに飛ぶ」と言った遷移自体を説明してしまうことです。
ここまで説明してしまうと、このUIは分かりやすいのか?使いやすいのか?と言った純粋なUIチェックが出来なくなってしまいます。

場合にもよりますが、プロトタイプを確認する時にどこまで説明するかは事前に慎重に決めてください。
最低限の範囲としては、プロトタイピングツールの使い方に慣れていない人のために、基本的な操作方法を説明するだけでも十分です。


おわりに

いかがでしたでしょうか?
プロトタイピングがうまくいかないなとお悩みの方は、今回お話した3つのポイントに注意してみてください。

それではまた!デジマースのコンでした。

簡単アニメーション | 回転とループ

こんにちは!今回のテーマは「簡単アニメーション | 回転とループ」です。
Adobe Animateで簡単に作れる「回転」と「ループ」のアニメーションについて解説します。

モーショントゥイーンの機能を使えば、メインタイムラインのレイヤーを1つに抑え、再生時間の変更にも柔軟に対応できるループアニメーションが作れます。

今回は基礎的な表現として、回転し続ける歯車を作ってみたいと思います。


使用するソフト

■Adobe Animate(アドビアニメイト)
※バージョンは「CC 2020」を使用しています。


シンボル化する

素材をシンボル化して、モチーフに動きを付けるための環境を整えます。

まず「レイヤー」に分かりやすいように名前を付けます。今回は歯車と言う名前にしました。
レイヤーが出来たら、「ライブラリ」に回転させたい素材を入れます。

「ライブラリ」に入れた素材を「ステージ」にドラッグ&ドロップします。こうすることで最初に作った歯車レイヤーのキーフレームに素材が挿入されます。

次にショートカットキーのF8で「シンボルに変換」を行います。シンボルに変換する際の「種類」は「グラフィック」で設定します。

名前はレイヤー名と統一したかったので歯車にしました。ここは状況に合わせて自由に設定しても大丈夫です。

ステージの見た目に変化はありませんが、「ライブラリ」にグラフィックシンボルが自動で追加されます。
特殊な形のアイコンがついているので、他の画像素材と見分ける時はアイコンをチェックしてください。

シンボル化はこれで完了です!

モーショントゥイーンを作成

モーショントゥイーンを作成するために、シンボル用のタイムラインを表示します。
「ライブラリ」のグラフィックシンボルのアイコン部分をダブルクリックするとシンボル用のタイムラインが表示されます。

見た目の変化が分かりづらいですが、ダブルクリックした後「タイムライン」の左上にグラフィックシンボル名が出て入れば大丈夫です。

「レイヤー」のキーフレーム上で右クリックをして「モーショントゥイーンを作成」を選択します。

「ライブラリ」にムービークリップシンボルが自動で追加されます。ムービークリップシンボル用の特殊なアイコンが付いています。
名前がデフォルトのシンボルになっているので、画像名と統一した名前を付けると分かりやすいです。

そうすると、1秒分の黄色いフレームが「タイムライン」に表示されます。
1秒だと短いので、フレームを2秒まで伸ばします。

「タイムラインの最終フレーム」に青いバーが掛かった状態で、「ステージの画像」を自由変形ツールで90°回転させます。

再生時間を調整してループさせる

シンボル個別のタイムラインからメインタイムラインに戻り、再生時間を調整します。
好きな時間に「フレーム」を伸ばすことで、自動で歯車の回転をループさせることが出来ます。

先ほど2秒で1/4回転するモーショントゥイーンを設定したので、8秒まで伸ばせば1回転分、16秒まで伸ばせば2回転分となります。
これだけで簡単に歯車を回転させることが出来ました。

また、メインタイムライン上のレイヤーも1つなのでスッキリ見やすくなっています。
今は他のレイヤーが無いので大丈夫ですが、今後レイヤーが増えた時に編集作業がしやすくなります。


おわりに

いかがでしたでしょうか?
同じ動作をループさせたい時は、Animateの機能であるモーショントゥイーンを使うと便利です。
1往復分のアニメーションを作っておけば、再生時間を自由に変えられる他、メインタイムラインのレイヤー数を最小限に抑えられるからです。

ループするアニメーションが必要な時は、ぜひ活用してみてください!

それではまた!デジマースのコンでした。

第4回 販促 EXPO【春】出展のお知らせ(dgiftSNS、デジタルギフトキャンペーン)

この度、2021年1月27日(水)〜29日(金)に幕張メッセにて開催される「第4回 販促 EXPO【春】」に出展いたします。

今回は、デジタルギフトを活用したSNSインスタントウィンキャンペーンを簡単に実施することができる「dgiftSNS」を中心にご紹介させていただきます。

ブースでは、デモ動画の無料配布やその場で参加できるプレゼントキャンペーンを開催いたします。感染拡大防止策を徹底して出展いたしますので、ぜひこの機会に弊社ブースまでご来場ください。

また、ご来場が難しい方はオンラインでもご参加いただけます。
オンラインにて最新資料のダウンロードやビデオ通話、チャットでの質問・商談が可能となっておりますので是非ご参加くださいませ。


出展概要

■ 名称:第4回 販促 EXPO【春】
■ 主催:リード エグジビション ジャパン株式会社

■ 会期:2021年1月27日(水)〜29日(金)
    10:00~18:00(最終日のみ17:00)
■ 会場:幕張メッセ4~6ホール
■ 小間番号:11-41 ※4ホール出入口から奥にあります。

■ 入場:全来場者登録入場制 
    事前登録者、招待券持参による当日登録者:入場無料
    当日登録:入場料5,000円/人

    招待券をお持ちでない方はお送りいたします。
    こちらからお問い合わせください。

    https://www.dgift.jp/contact

    展示会の詳細はこちら
    https://www.sp-world-spring.jp/ja-jp/about/wspsp.html

はじめてのオンラインイベント|メリットとデメリット

こんにちは!今回のテーマは「はじめてのオンラインイベント|メリットとデメリット」です。
オンラインイベントの種類は、企業が行う真面目なWebセミナーから友人との気軽なオンライン飲み会まで様々です。それぞれの運用方法の違いやメリット・デメリットについてユーザビリティの観点でまとめました。

コロナ禍によりオンラインで行うイベントが急速に普及しました。
動画配信と言う形は同じでも、イベントごとに細かい仕様に違いがあり、実際に参加してみると思った以上に色々なやり方があるんだと驚きました。
今回の記事では、そんなオンラインイベントの仕様の基礎+ワンポイントについてもまとめてみました。


オンラインイベントとは

オンラインイベントと一口に言っても様々な種類がありますよね。Webセミナー、ウェビナー、オンラインセミナー、オンラインライブ、Web会議、Web面接など。
身内に限定して私的に行うのがオンライン飲み会に当たります。

このように言い方は沢山ありますが内容はどれもほぼ同じで、インターネット上で動画を配信したり、それによってコミュニケーションを取ることを指します。
特にコミュニケーションを取るオンラインイベントの場合、企業によっては様々な機能を用意して参加者が有意義な時間を過ごせるよう工夫されています。


オンラインイベントの特徴

まずはオンラインイベントの基礎的な特徴についてお話ししたいと思います。
特徴は大きく分けて3つあり、「集客の拡大」「コスト削減」「リード(見込み顧客)の獲得」です。

集客の拡大

インターネット環境さえ揃っていれば、エリアに縛られず誰でも参加する事が出来ます。
特定の会場に行かなければならないオフラインイベントだと他県や遠方に住んでいる人が参加し辛いデメリットがありましたが、その問題を払拭することができます。

また、会場のキャパシティに縛られることもないためより多くの人に参加してもらうことが出来ます。
アーティストのライブで言えば、これまでは会場の広さの都合で人数を制限したりチケットの抽選をしなければいけませんでしたがその必要がなくなります。
ファンクラブ会員だけでなく、参加したい人全員がライブを視聴することも可能になりました。

コスト削減

リアルイベントを行う時に必要な会場費・交通費が必要ないので大幅なコスト削減になります。
また、会場の設備や印刷物、常駐するスタッフの金銭と時間のコストも削減出来ます。

ネットワーク環境とPCとカメラとマイクの4つが揃っていれば十分です。
もっと設備を絞ろうと思えば、ネット環境とスマホさえあればオンラインイベントの開催・参加が可能です。

リード(見込み顧客)の獲得

興味関心度の高い、目的意識の高い人たちの間で配信・視聴が出来るため、リード(見込み顧客)が獲得しやすい点が上げられます。
あらかじめ興味を持って参加してもらえる他、参加のしやすさから幅広いエリアの多くの人々に知ってもらうことが出来ます。
敷居の低さで言えば、リアルイベント以上に顧客獲得のチャンスが生まれます。


配信方法の種類

オンラインイベントの配信方法は2つあり、「ライブ配信」と「オンデマンド配信」です。

ライブ配信

ライブ配信とは、開催中のイベントをリアルタイムで配信する方法です。
メリットは、映像やチャット・アンケート機能を使ってコミュニケーションを取ることが出来る点です。視聴者の反応や疑問点をリアルタイムで確認しながら進行できます。

デメリットは、参加者それぞれの通信環境による影響が大きい点です。
参加者が電波の悪い場所でライブ配信を見ようとすると、映像が途切れたりまったく映らなくなることもあります。
主催者側で改善できる部分ではないため、解決策としては、通信環境に関する事前の注意喚起を行い参加者に最低限の通信環境を整えてもらうことが大切です。

ライブ配信に適したイベント
  • 説明会
  • 研修
  • セミナー
  • ライブコンサート
  • オンデマンド配信

    オンデマンド配信とは、事前に動画をサーバにアップロードしておき、視聴者の任意のタイミングで見られるようにする方法です。
    メリットは、繰り返し配信・視聴することが出来ることです。
    研修などで同じ講義を繰り返す場合、一度撮影してしまえば繰り返し使えるため人件費や時間の節約になります。また、配信後にもう一度見たいと思った時にすぐ復習することが出来ます。

    デメリットは一方通行になりやすい部分があることです。
    長々と一方的に喋る動画にならないように内容を簡潔にまとめたり、編集で動画を分かりやすくまとめておく必要があります。

    オンデマンド配信に適したイベント
  • 研修
  • セミナー
  • 講義

  • オンラインイベントのワンポイント

    オンラインイベントで実際に使用されているワンポイント機能を、ライブ配信とオンデマンド配信に分けて紹介したいと思います。
    極端なことを言ってしまうと無くても良いのですが、あるとよりUXが充実する機能となっています。

    ライブ配信

    ■チャット

    オンラインイベントのチャット機能

    参加者がリアルタイムに疑問や感想を伝えることが出来るので、臨場感や参加してる感が生まれます。
    その場で臨機応変な対応が出来るので、疑問に答えたりプラスアルファなお話しをすることが可能です。
    また、顔を出さずに気軽にコメントを打ち込めるので、より活発なコミュニケーションが期待できます。

    ■アンケート

    オンラインイベントのアンケート機能

    アンケートや質問をしたい時にラジオボタンなどの選択肢を出すことで、参加者から回答を得ることが出来ます。
    主催者側の一方通行になりがちな場面でも、双方向からアクションが起こせるので、リアルな体験と情報が得られます。

    ■アクション・アバター

    オンラインイベントのアクション・アバター機能

    コンサートなどエンターテインメント性の強いイベントの場合は、アクションやアバター機能があるとUXが高まります。
    〇〇を応援したい、一緒に会場を盛り上げたい、一体感を感じたい、と言う参加者の気持ちを補うことが出来ます。
    参加者の感情を表すアクション機能や、アバターをオンラインの会場に配置出来るようにすることで、リアルイベントに勝るとも劣らない体験が得られます。

    特殊なアクションやアバターのカスタマイズ要素が課金要素にすることで、収益化も計れます。

    オンデマンド配信

    ■ポータルサイト(見返す時の導線)

    視聴者が後々動画を見返す際の導線をしっかり確保する必要があります。
    ポータルサイトを用意したり、YouTubeにアカウントを作っておくケースもあります。
    また、URLをメールで送ったりサイトのブックマークを推奨するなど、主催者側から連絡しておいても良いです。

    ■タイムスケジュール

    事前に用意している動画とは言え、タイムスケジュールを組んで順次公開する、と言う方法もあります。
    配信する動画数が多い場合のみ有効な方法ですが、参加者が自分で視聴したい動画を選ぶことが出来るので、イベント性が高まります。
    大型イベントの場合、タイムスケジュールを組むことで視聴者が分散するので、アクセスが集中してサーバーが混雑する事態を防ぐことも出来ます。


    おわりに

    いかがでしたでしょうか?
    オンラインイベントはメリットも多く感じる反面、やっぱり対面で話したい、もっとこうだったらな…と感じる部分もあります。

    特にライブ配信型のオンラインイベントは、コミュニケーションの取り方などこれからも大きく進化していくと思います。
    今から沢山のオンラインイベントに参加して進化の過程を見ていくのも面白いのではないでしょうか!

    それではまた!デジマースのコンでした。

    初心者向け文字とデザイン|比率違いのバナーの作り方

    こんにちは!
    今回のテーマは「初心者向け文字とデザイン|比率違いのバナーの作り方」です。
    文字デザインの中でも、同じデザインで比率違いのバナーを作る時に使える文字組みのコツについてまとめてみました。

    Web向けのバナーや広告を作る際、複数の比率のバナーが必要になることが多いです。
    バナーの形は、横長、縦長、正方形、細い、小さい、など。また、スマホ向けかパソコン向けか用途によって様々です。

    何も考えずに文字を組んでしまうと、サイズによっては読みづらくて何が伝えたいのかよく分からないバナーになってしまいます。
    また、比率が大きく変わった時にデザインを調整するのが大変になることも…。

    複数サイズのバナーが必要な時に役立つ、簡単に比率違いのバナーを作るコツを書いていきたいと思います!


    訴求する文章と規定を確認

    まず始めに複数の比率のバナーを作る時は、訴求したいキャッチコピーなどの文章と、必要サイズとその規定(有れば)をしっかり確認してください。
    何故なら、バナーのサイズによっては入れたい文章が全て入りきらない…と言う事象が発生してしまうからです。
    特に広告の場合、1200×628と320×50など大きくサイズが違うバナーが必要になることもあります。サイズが大きい方のバナーには入る文章でも、小さい方だとどうしても全て入れるのが難しくなってしまいます。

    これをまず確認しないと、1200×628のバナーデザインをガチガチに作ってから320×50を作ろうとした時、視認性を確保しつつ文字を入れることが出来ない…となってデザインのやり直しが発生してしまうことも。

    対処方としては2つあります。
    ①どのサイズのバナーでも統一して入れられる文章を用意する。
    ②大きいサイズ用の文章と、小さいサイズ用に簡略化した文章の2種類を用意する。

    ただ、広告を作る場合は基本的に①の方法が無難です。
    ABテストなど広告効果の分析がしたい時に不適切だったり、広告規定で文字の面積が厳密に決められている場合があり、そもそも長い文章が入れられないことも多いからです。

    ②の方法で進めたい時は、簡略化前の訴求内容と乖離しすぎないように注意が必要です。

    バナーが広告なのかそうでないのか、必要なサイズはどれなのかを確認してから状況に合わせて調整してみてください。

    次の項目からは例として、②のケースを想定して文字組みをしてみます。


    優先順位を決める

    バナーに入れる要素の優先順位を決めます。バナーを作る上でとても大切なポイントです。
    なぜ優先順位を決めるかと言うと、優先度に合わせて表現に強弱を付けることで分かりやすいバナーを作ることが出来るからです。

    バナーに必要な要素をザックリ整理すると、テキストと画像の2種類です。
    中でもテキストは情報量が多くなりがちで、ゴチャつきやすい部分でもあります。

    テキストの一例としては「50%OFF SALE」「初月無料」などメリットを訴求する文言の他、キャンペーン概要や企業情報、細かい注釈などを入れることが多いです。
    CTAのために「今すぐチェック」などのクリックを誘導する表現を使う場合もあります。
    沢山の情報をそのまま配置しただけだと内容が頭に入りづらく、メリットをちゃんと認識してもらえない可能性が高くなってしまいます。

    スマホでWebページを見ている時に上の図のようなバナーが不意に出てきて、読むぞ!と思うでしょうか?
    このままだと、あまり読む気は起きないと思います…。
    クリックしてもらえないどころか最悪の場合、認識すらされずにスクロールされてお終いです。

    そうならないために、ユーザーにとってのメリットや伝えたい訴求ポイントなど、1番見て欲しい部分の優先度を最も高く設定します。
    あとは条件や必要事項など、全ての要素に順位を付けてください。

    ちなみに、この順位はあくまで優先度の順番であって並び順ではないことを頭の片隅に置いておいてください。
    テキストの並び順は、文章として違和感がないように後ほど調整します。


    文字の大きさに強弱を付ける

    優先順位ごとに文字のサイズや太さを変えます。
    優先度の1番高い文字は、他の文字サイズと最も差を付けて大きく目立つようにしてください。1〜2px単位の細かい調整はせず、誰が見ても明らかに大きさが違うと分かるサイズが良いです。
    優先度が2番目に高い文字も1番目と差を付けつつ、その他の文字より明らかに大きくなるようにしてください。

    ただ、全ての文字に大きな差異を付ける必要はないです。
    優先度1、2までは前述の通りですが、それ以下の文字は読みやすさに合わせて調整します。
    日付や注釈など、優先度が1番低くなりやすい事務的な要素は、視認性に気をつけつつかなり小さくしてしまっても大丈夫です。
    Webで見やすいフォントサイズの最小値は20pxくらいなので、そこから小さくなり過ぎないサイズを設定すると良いです。

    調整を行ったのが下記の画像ですが、いかがでしょうか?
    文字の大きさに強弱を付けただけでも読みやすさが違ってきたかと思います。

    フォントサイズを記載していますが、調整しているうちに変化していく要素なのでサイズ感の参考程度に見てください。


    表現と配置の調整

    次に、装飾などを付けて表現に強弱を付けます。
    装飾といっても華美である必要はなく、丸や四角などの単純な図形でも十分です。

    装飾を付けると同時に、配置も調整を行ってください。
    文章として違和感なく読める状態に整えるのが目的です。並び順を変える他、横や斜めにずらしても良いです。
    文字の多さや単調さを軽減させるイメージで調整してみてください。


    最終調整

    最後の調整として、より読みやすいように色やエフェクトなどの細かい部分を整えていきます。

    これで1つ目のバナーは完成しました!
    最初のバナーよりメリットが分かりやすくなり、ユーザーの目に留まるようなバナーになったのではないでしょうか?


    アートボードを複製して別サイズのバナーを作る

    1つ目のバナーが出来たら、アートボードを複製して別サイズのバナーを作ってください。
    新規で作ると作業効率が良くないので、可能であればアートボードをパーツごと複製すると作りやすいです。

    アートボードのサイズを調整したら、それに合わせて文字や装飾のサイズと配置も変えていきます。

    この工程のポイントは、1つ目のバナーを作った時に決めた「優先順位が1番高い文字は1番目立つようにする」などの優先順位のルールを守ることです。
    比率が近ければ問題ないと思いますが、比率が大きく違うバナーを調整する時に崩れやすいポイントでもあります。

    また、テキストを省略する時のポイントですが、文章の簡略化、バナーへの記載が義務付けられていない要素の削除が適切かと思います。


    おわりに

    いかがでしたでしょうか?
    バナーを作る時に大きなポイントになるのが文字組みです。
    比率が複数必要になった時のことを想定して作っているのとそうでないのとでは、後々のデザインのしやすさやが変わってきます。
    バナーを作る際はぜひ試してみてください!

    それではまた!デジマースのコンでした。

    viewport(ビューポート)とは?viewport設定【2020】と375pxをターゲットにしたボタンレイアウトの作り方と並べ方

    2019-2020-2021
    今回は、最新のiPhone12を含めたスマートフォンのviewport(ビューポート)設定とviewport設定下でのボタンの並べ方を、画面仕様の説明を含めて紹介します。


    目次


    重要な横画面の解像度

    横にボタンがいくつ並べられるかについては、端末の横画面解像度とppi(画素密度)が影響します。

    iPhone4/SE系など、横画面解像度640px幅の端末のviewport設定幅は320px/326ppiですが、
    普及端末は、iPhone6/SE(2020)系の横画面解像度750px幅の端末のviewport設定幅は375px/326ppiです。

    注意が必要なのが2020年からの「iPhone12」シリーズで、
    従来のルールから追加変更があり、
    「横画面解像度÷2」の「2x計算(÷2)」がviewportの値ではなく、
    「横画面解像度÷3」の「3x計算(÷3)」となります。

    ■iPhone 12 mini
    5.4インチ 1080×2340
    ⇒viewportの値「360px」

    ■iPhone 12
    6.1インチ 1170×2532
    ⇒viewportの値「390px」

    ■iPhone 12 Pro
    6.1インチ 1170×2532
    ⇒viewportの値「390px」

    ■iPhone 12 Pro Max
    6.7インチ 1284×2778
    ⇒viewportの値「428px」

    ルールが増えましたが、
    iPhone向けのWebデザインは、
    320px~428Pxを意識すれば問題ありません。
    (2021年現在の普及端末viewport値は375px)

    最新のエントリーモデル端末のiPhone12では、横画面解像度1170px幅/viewport値390px/460ppiです。


    viewport(ビューポート)設定について

    『viewport』とは、スマートフォン端末ディスプレイの「物理的解像度表示」ではなく、調整可能な「仮想サイズ表示」にする設定です。

    スマートフォンの端末はPCなどの画面サイズが大きい端末とは違い小さいため、『viewport』の記述をHTMLのmetaタグ内に設定することで、文字がスマートフォンでも読みやすい表示に設定できます。

    <head>
      <meta name="viewport" content="width=device-width, user-scalable=no">
    </head>
    


    ※iPhone4以降は高解像度「Retinaディスプレイ」になったため、viewportの横幅ピクセルは端末ディスプレイ解像度の半分に設定されています

    また、画面表示の横幅を端末横幅(100%)に合わせる設定も出来ます。

    それにより、テキストや画像を横スクロールせずともテキスト改行や画像縮小表示をし、上下スクロールの簡単操作だけでページを確認できるモバイルデバイスに最適化した視認性を再現できます。


    ボタンは横に5つまで並べる

    「押しやすいボタン」の最小サイズについてはAppleのUIガイドラインでは、(viewport設定で)44x44(px)と設定しており、実サイズでは約7mm × 7mm です。
    実解像度では88x88(px)となります。

    88px(44px)であれば、横750px(375px)の場合は7個ほどボタンを横に並べることができますが、その場合は文字の書かれないアイコンだけのボタンに限られます。

    実際にはボタンに4文字程度の文字/ラベルが書かれることになるため、5個程度が横に並べられる限界数になります。


    5つのボタンが並ぶコンポーネント

    それでは5つのボタンとそれに近いUIコンポーネント例を紹介します。

    『ページ内リンク(アンカータグ)』


    ページの長さがある構成の場合はページ内リンクボタンを設置。

    『タブ』


    カテゴリの違う要素を限られたスペースで出しわける場合に設置し、最も左側は一番優先度が高い項目を置きます。

    『セグメンテッドコントロール』


    一つの関連性あるデータの集団を各セグメントで切り出して表示させる場合に有効。
    「ランキング」「ユーザーデータ」「地域」など。


    さいごに

    viewport(ビューポート)設定と基礎的なボタン設置について紹介しました。

    カテゴリ/利用シーンの競合しないタブレットの登場、そして折り畳みスマートホンが登場しておりますが、スマートフォンの登場から現在まで、基本的に画面の大きさには大きな変化はありません。

    利用者のアクションは「ボタン」からはじまりますので、viewport設定下の適切なボタン設置をしていきましょう。

    次回も情報設計に関係した話題をお届け致します。
    デジマースのネモトでした。

    ソーシャルディスタンスの保ち方|ユーザビリティ

    こんにちは!
    今回のテーマは「ソーシャルディスタンスの保ち方|ユーザビリティ」です。
    より良いソーシャルディスタンスの保ち方について、ユーザビリティの観点から考えてみました。

    コロナ禍により生活の中に様々な工夫が必要になりました。中でも特に目に入るのが「ソーシャルディスタンス」です。
    お店に行くとレジ前の道に線が引かれ、線に合わせて前後の人と距離を保つのが当たり前になっていますよね。
    お店の入り口やトイレの床など、待機列が形成される場所に線が引いてあることが多いです。
    他にも様々な方法でソーシャルディスタンスが保たれています。

    安全に配慮した対策ですが、これは利用者の裁量やモラルに依存する面も大きく、ただ線が1本書いてあれば万事OKということにはなりません。
    例えば線の内側か外側か、はたまた中心に立つかで人それぞれの判断が異なり、結局適切な距離が保てていない場面もあります。

    そうならないように、適切にソーシャルディスタンスを保つためにはどのような方法があるのかまとめてみました。


    ソーシャルディスタンスとは

    直訳すると社会的距離という意味です。コロナの流行に合わせて耳にする機会が増えました。
    人が密集するとコロナの感染リスクが高まるため、人との距離をできるだけ2m(最低1m)空ける目的があります。

    ソーシャルディスタンスを保つための対策として、「1〜2m間隔で床に線が書いてある」「座席の一部を使用不可にして間隔を空ける」などが一般的です。
    どれも有効な手段ですが、利用者の裁量やモラルによっては適切に運用されないというデメリットもあります。

    デメリットを解消するためには、「ここに立てばいいんだな」「間を空けてここに座ればいいのね」と、誰が見ても何をすれば良いか分かる必要があります。
    当たり前のことではありますが、線を引いただけなど最低限の対策だと十分でない場合があります。利用者それぞれの考え方や状況が異なるためです。

    次の項目で、これを解消するための方法を考えていきたいと思います。


    適切にソーシャルディスタンスを保つ方法

    立つ位置の間隔を空けたい場合

    今の問題点としては、実際にどこに立つかは利用者の判断に寄ってしまっているところです。
    これを解決するためには立つ位置をより明確にして、誰でも決められた位置に必ず立てるようにする必要があります。

    ◼️立つ位置を明確にする

    線だけでなく、足跡などの印を付けて立つ位置を明確にします。
    一番シンプルで分かりやすいかと思います。

    枠で囲う

    枠で囲うことで1人分のスペースを明確にします。
    2、3人のグループが待機列を作ることが想定される場合にも適切です。
    また、スペースが狭い場合は枠の中に「×」を描き、立ってはいけないスペースを伝えるのも分かりやすくなります。

    座席の間隔を空けたい場合

    現状よく見るのが、「間隔を空けてください」などと書かれた紙がテーブルや椅子に置いてあるケースです。
    隣席や目の前の席にその紙を置くことで、ソーシャルディスタンスを保つ目的があります。ですが、グループで着席する場合に紙を退かして座ってしまう人も時々見かけます。
    それを防ぐためには、より動かしづらくより座りづらい対策をする必要があります。

    退かしづらい物を椅子に置いておく

    大きめの人形など容易には退かしづらい物を置いておきます。
    抱っこしたり別の場所に置くには大きくて邪魔なサイズ感が良いです。
    海外のレストランのマネキンや、日本のカフェのぬいぐるみなどを見たことがある人も多いかと思います。

    テーブルに物を置いておく

    レストランなどの場合、テーブルに物を置いておくのも効果的です。
    レストランで提供されているメニューの食品サンプルを置いておくと、宣伝効果もあります。

    カウンターや長テーブルなど不特定多数が密になりやすいテーブルの場合は、観葉植物や置物でも対策できるかと思います。

    +α

    改善の余地があるかもしれませんが、実際に取り組まれていて良いなと思ったものもご紹介します。

    間隔を空けて地面に絵を描く


    某駅の喫煙所で取り組まれている試みですが、地面の一部に青空や植物の絵を描くことで、人が絵を避けて立つと自然とソーシャルディスタンスが保てるという物です。
    無骨な線で区切るのではなく、ホッとする絵で人間の良心を思い出させるような表現が素敵だと思いました。
    ですが、ナチュラル過ぎるせいか絵を特に意識せず踏んで立ってしまう人もおり…

    発想は素敵なのですが、区切り線ぽくないばかりにソーシャルディスタンスを連想しづらい難点もあり、改善が必要だと思いました。
    いっそ本物の植物の鉢を置いておくのも良いかもしれません。


    おわりに

    いかがでしたでしょうか?
    個々の意識に左右されてしまう面もありますが、少し手間を掛けるだけでより効果的にソーシャルディスタンスを保つことができます。
    新型コロナウイルスによる影響が一日でも早く収まるよう、引き続き注意して行きればと思います。

    それではまた!デジマースのコンでした。

    通知のユーザビリティ

    こんにちは!
    今回のテーマは「通知のユーザビリティ」です。
    アプリの通知機能について、より良いユーザビリティとはどんな物か考え直してみました。

    皆さんはアプリの通知機能を使っていますか?
    アプリによっては設定していたり、全てOFFにしていたりと人それぞれかと思います。

    とても便利な一方で、ストレスになってしまうことも多い機能です。
    特にスマホに慣れていない人にとっては「いらない通知がたくさん来て鬱陶しいな…」とデメリットの部分を大きく感じてしまうこともあります。

    そうならないように、ユーザーにとって本当に使いやすい通知とはどのようなものかまとめてみました。


    通知とは

    通知とは、アプリ内部のお知らせをアプリを開かずとも自動的に教えてくれる機能です。プッシュ通知と呼ばれることもあります。
    メールやSNS、ユーティリティアプリやゲームなどで活用されることが多いです。

    通知の種類は4つあります。ロック画面に表示される物、通知センターに表示される物、バナー、バッジです。

    通知が設定されるタイミングですが、iOSアプリの場合は、始めてアプリをダウンロードして開いた時に「通知の設定をしますか?」と尋ねられることが多いと思います。そこで許可すると設定されます。
    Androidアプリの場合はデフォルトで通知が許可されているため、アプリをダウンロードして起動、または初期設定をすると通知が届くようになります。

    また、各端末の設定アプリからも設定することが出来ます。
    通知のON・OFFの設定から、全ての種類の通知が届くようにするのか、バッジだけ表示するようにするのかなど細かい設定が出来ます。


    通知のメリットとデメリット

    簡単に通知のメリットとデメリットをまとめてみました。

    【メリット】

    ■新しい情報をすぐに知ることが出来る。
    ■わざわざアプリを起動する必要がなくなる。
    ■通知が複数ある場合、ロック画面や通知センターでまとめて確認することが出来る。

    【デメリット】

    ■通知が多いと、数、音、通知を消す処理などにストレスを感じる。
    ■通知内容がユーザーにとって不要な情報であったり、本当に必要な情報が埋もれてしまうことがある。
    ■データ容量や充電を消耗してしまう。


    通知の問題点と解決方法

    通知の問題点として、デメリットの「通知の数」が大きいと考えられます。
    誰かと連絡を取り合っていたり、オンラインゲームをしていたり、スマホで何かに集中している時に通知がたくさん来るとストレスを感じますよね。
    しかもその通知内容が自分にとって何のメリットもなければ尚更です。

    また、手当たり次第に通知を許可してしまっている場合、重要な通知が不要な通知に埋もれて見落とす危険とストレスが増加します。

    この問題を解決できるユーザビリティとはどのようなものか考えてみました。

    事前に通知内容の説明をする

    どのような内容の通知が来るのか、ユーザーにとって必要な情報なのか判断出来るように事前に丁寧に説明します。
    ユーザーにしっかり納得して通知の設定をしてもらうことで、通知の数が不必要に増えないようにします。

    まずは下の画像を見てください。初めてアプリをダウンロードして開くとよく見かける説明文です。

    事務的で簡潔な内容ですが、これだけだと説明が十分とは言えませんよね…
    どんな内容で、どの位の重要度の通知が来るのか分からず、ユーザーはネガティブな印象を持ってしまいます。
    通知が鬱陶しい物と言う先入観が先行してしまえばすぐに「許可しない」を押してしまうでしょうし、慣れていないユーザーは警戒したり、訳も変わらず許可したものの興味のないPRが沢山来て辟易…となってしまいます。

    こうならないように、まずはどのような通知が来るのか具体的に説明してあげると良いです。
    先行で新着情報が届く、期間限定のお得なクーポン情報、ポイントの有効期限が迫っていると言うお知らせなど。
    ユーザーにとって有益な情報が届きますよと伝えてあげると、通知の設定が必要か否かの判断がしやすくユーザビリティが改善します。

    事前にメリットをイメージしやすくする

    通知が来るメリットをイメージしやすいように事前に訴求します。
    アプリの機能やユーザーの状況によって優先度は異なります。通知が来ることのメリットが大きい物もあれば低い物も…。
    例えば仕事で使うチャットアプリの通知と、天気予報が更新されたことを知らせる通知の優先度は違いますよね。
    スマホを使い慣れていない人だと、そもそも通知のメリット自体を想像し辛いこともあります。

    具体的にどのようなシーンで通知が役立つのか説明することで、どんな人でもメリットを理解出来るようにします。
    こうすることで設定の有無を判断出来るようになり、ユーザビリティの改善に繋がります。

    通知の設定に関するヘルプを設置する

    サービス内のヘルプなどに、設定アプリで通知のON・OFFが出来ることを書いておきます。
    通知のON・OFF設定は基本的にスマホにデフォルトで入っている設定アプリからでないと出来ません。それを知らずに個別のアプリから設定しようとして「出来ない…」と困ってしまうユーザーもいるため、ヘルプなどの分かりやすいところで設定方法を説明してあげると良いです。

    アプリ内で通知の細かい設定が出来るようにする

    通知設定をONにしてもらえた場合ではありますが、アプリ内で細かい通知設定が出来るとより使いやすくなります。
    1つのアプリから届く通知と言っても、内容は様々かと思います。新着通知やお気に入り登録された通知、メンテ情報などアプリからの事務的な通知など。
    ユーザーが知りたい情報だけ選択できるとよりユーザビリティが改善します。


    おわりに

    いかがでしたでしょうか?
    疎まれてしまうこともある通知機能ですが、適切な設定が出来ればとても便利で役立つ機能です。

    気を付けないと売り手本位になってしまうことの多い機能です。
    今回はユーザーに注意を促したりメリットを知ってもらう形でユーザビリティの改善を試みてみましたが、そもそもサービス提供側が通知内容を吟味して改善していけるように、私も気をつけて取り組んで行きたいと思いました。

    それではまた!デジマースのコンでした。

    ディザリング画像処理(ディザ処理)とは【GIFとPNGの容量を軽くする書き出し方】

    ディザリング画像処理(ディザ処理)を中心に、各画像形式と絡めて解説します。

    Jpeg画像の容量を小さくするには?

    jpegの容量を小さくするには「Adobe CC」を契約している場合は『Photoshop』で「Web用に保存」を使い60~80%の品質が無難です。

    アップデートが停止している『Adobe Fireworks』はPNG8形式とGIFの減色に強いツールですが、Jpegの場合は『Photoshop』での「Web用に保存」の方が軽くなる場合が多いです。

    『Photoshop』でJpegを書き出す場合は、
    スマートフォン向け写真画質の画像(w750p× x 程度)であれば100~200k以内に収めますが、さらに最適化をするのであればPNG8の「ディザ処理あり」の画像と比較して綺麗と思える方を運用に使います。

    人物風景写真の場合はJpegが好ましいですが、60%以下に品質を下げて圧縮していくと「ブロックノイズ」が顕著に目立ってきて使用に耐えられない画像になります。

    【png gif JPEGの違い】について一言でいうと、

    • 最大256色しか使えないPNG8とGIFでは、PNG8の方が容量が軽くなる
    • PNG24、PNG32の形式では256色以上を使えるが、容量が桁違いで大きくなる ※ブロックノイズが無くJpegよりも綺麗
    • PNGとGIFは再保存や圧縮を繰り返しても画像が劣化しないがJPEGは劣化していく
    • 過去の携帯電話端末ではGIFは使えたがPNGが使えない機種が大半であった ※docomo/auはpngが使えない機種が存在したSoftBankは両方使える

    それでは、
    実際に画像を使用した際、WEBページを表示するまで「8秒以上」待たされた時代がありました。

    書き込み速度(ライト)、読み込み速度(リード)、が機器/回線ともに高速になった今では、WEBページ画像の重さを気に掛ける習慣が減っておりましたが、今回の世界的規模のコロナ被害により、同時刻に部屋でネットを利用する人々が増え、稀にページの表示に時間がかかる状況があります。

    「いつ発生するかわからない緊急時」においても、広く公平に、WEBを問題なく閲覧できる環境を構築するために必要な「ネット回線にやさしい」軽量化/最適化された画像の作り方をアーカイブとして残します。


    目次


    画像容量の傾向

    GIF/PNG8のインデックスカラー画像データは、原則ピクセル(ドット)配置が複雑化した分、データ容量は増えます。


    よって、可能な限りベタな1色アニメ塗りを意識すれば、まず容量は軽くなります。


    模様の違いによる画像容量比較

    それでは様々な画像配置で比較してみましょう。


    注意が必要なのは、一見、容量が同じになりそうな「縦じま」「横じま」の違いだけでも容量が変わるデータ構造です。

    詳しく説明するとバイナリデータやパレット構造などのプログラム的な話になるので割愛します。


    ちなみにこの赤青のタイル模様の画像は縮小してドットバイドットで表示されると赤色と青色が混ざり紫色に見えます。

    それであれば、最初から紫色1色で表示したほうが画像容量は軽くなるのですが、昭和な時代のコンピュータでは、白黒、光の三原色、色の三原色である、
    「青」「赤」「マゼンタ」「緑」「シアン」「イエロー」「白」の7色に無色の「黒」を加えた8色表示しかできない制限ある製品があり、疑似的に7色以外を再現する「タイルペイント」技法に需要がありました。


    使用色数を減らす

    使用する色が1色増えるだけで容量が増えます。

    GIF/PNG8の形式で書き出されると、インデックスカラー(パレットカラー)は全256色で構成されていますので、そこから64色→32色→16色、と大まかに色数を減らしていき、
    元画像の再現度が7~8割ぐらい留めている段階で止めます。

    その段階から微調整の仕上げにはいり、1色ずつ徐々に色を減らして最終調整をします。

    うまくディザ処理をすれば「半分の色数」で、「容量も4割」ほど減らせます。


    ディザ(ディザリング)処理をしない

    ディザ処理(ディザリング)はこれまでの説明のように、異なる2色を隣り合わせに並べることで足りない色を疑似的に再現する効果ですが、
    タイル模様にドットが配置されることから「タイルペイント」とも呼ばれます。

    この処理をすることで、仕様上の色数以上の表現ができます。

    しかし、写真や段階のあるグラデーションを使っている画像の容量削減に有効ですが、ペタッとしたアニメ調の平らな表現には向きませんので使い分ける必要があります。


    ※厳密には、平たんな部分の無い写真画質の画像はJPEG形式が容量削減に適しています。


    画像再現→色数を増やす?ディザ処理をする?

    色数を減らすか、多少容量が増えてもディザ処理で元画像の再現度を保つかを判断します。

    目安は、仕様設計で定めた画像容量の上限です。
    色を増減させながらディザ処理具合も都度確認して、
    目安の画像容量を超えないギリギリまで画像再現度を調整し書き出します。

    書き出した画像はそのものに見えるかどうか、第三者に確認してもらいましょう。

    問題なければ、仕様に沿った最適化された画像の出来上がりです!


    リクエストを減らす→CSSスプライトで一枚画像にする

    WEBページを表示する際に読み込み速度に影響を与えるのがWebサーバーへの「リクエスト」回数です。

    このHTTPリクエスト回数を如何に減らすかが、WEB設計をする上で重要であり、またやりがいある作業です。

    GIF画像を1枚読み込むと  1リクエスト。
    GIF画像を10枚読み込むと 10リクエスト。

    原則、リクエスト数が増えた分だけ処理が増え読み込み時間(待ち時間)が増えます。

    現代のネット回線は太く、一度の読み込みで受け取れる情報量が増えておりますので、

    1KBの画像でも、
    100KBの画像でも、
    読み込む速さに違いはありません。注)回線状況に影響を受ける

    ページ読み込み時間に影響するのは「×リクエスト数」です。

    100KBの画像を1枚読み込むより、
    1KBの画像を100枚読み込む方が、総容量は同じなのに時間がかかる訳です。

    前置きが長くなりましたが、
    そこで有効なのが「CSSスプライト」の処理です。※「CSSスプライト」使用方法の説明は割愛します

    100枚画像がどうしても必要な仕様であれば、その100枚を一枚の画像にまとめて張り付けてしまうやり方です。

    1リクエストで済み、おおげさに言えば100分の1、時間を短縮できます。

    WEBページで使用する場合はスタイルシートでx軸y軸の始点座標を指定することにより、マスク処理のように、画像のなかの見せたい「一部分」だけを都度表示させて運用します。


    さいごに

    なんでも可能な贅沢な環境よりも、制約ある作業に「やりがい」と「達成感」を感じるのも不思議なものです。

    次回も情報設計に関係した話題をお届け致します。
    デジマースのネモトでした。