UI/UXについて考える【女性向け恋愛シミュレーションゲーム編】

こんにちは!ユイPです。もうすぐ梅雨ですね。
私は傘を持ち歩くのを忘れがちで、夕方から雨予報なのに傘を持ってない…なんて事がたまにあります。
そんな時いつも、(ここで私に「この傘よかったら使ってください」なんて言ってくれる素敵な男性が現れないかな~)という妄想をします。
しかし現実にそんな恋愛ゲームのイベントみたいな事起こるはずもなく…大抵小走りで帰るので家に着く頃にはびしょ濡れです。

前振りが長くなってしまいましたが、これも伏線…今回のテーマは、
UI/UXについて考える【女性向け恋愛シミュレーションゲーム編】です。
恋愛シミュレーションゲーム(以下・乙女ゲーム)のUIにどんなものがあるのか、それぞれどんな役割をしていてどんな体験を得られるのか…分析してみたいと思います!
ちなみに冒頭の妄想からわかる通り、ユイPは普段から乙女ゲームをそこそこに嗜んでいます。


♥今回は”家庭用ゲーム機用のゲームのUI”として考えていきます。
♥”ゲームのプレイ画面”とそこに関わる機能のUIに触れていきます。
♥ゲームの形式はノベル形式のもので考えています。


基本のプレイ画面

まず、乙女ゲームの基本的なプレイ画面を確認してみましょう。

いや本当にこういうイベント現実に起きないんですか?
私の記憶と経験と乙女ゲームのサイトを巡って導き出した最適な解がこちらです。もちろんゲームによって差異はあります。
これを基本として、それぞれのパーツが何の役割を果たしているか書きだしてみます。

①人物名
台詞を話している人物の名前が表示される。主人公が喋っている時は主人公名が表示される。
②メッセージウィンドウ
台詞が表示される。台詞の表示速度は基本的に変更可能。ユーザーの好みで変える事が出来る。
ゲームによってはここの不透明度を調整出来るものもある。キャラクターを透かすか文字の読みやすさを優先するかはお好みで。
③台詞送りマーク
台詞が全文表示されると表示される。「台詞を次に送れるよ」という合図。
チカチカするアニメーションがついている事が多い。
④自動台詞送りマーク
台詞が自動送り(操作しなくても勝手に進んでいくモード)になっている時だけ表示される。自動に設定していない場合は出てこない。
画面右上に表示が出るゲームが多かった。ただ右上に日付など他の要素が表示されているゲームの場合、テキストウィンドウの横など別の場所に表示されることも。

ゲームをプレイしている際、常に画面上に表示されている最低限のパーツはこの4つが多いです。
ゲームによっては日付だったり、主人公の顔も表示されていたりするものもあります。世界観にあわせてゲームによって色々変わってきますが、あくまで「男性キャラクター」がメインなのでそれを邪魔するほど目立つ要素は配置されていないように思います。

また、これらのパーツはボタン1つで簡単に表示/非表示が出来るようになっています。(後ほど詳しく説明)

プレイ中に呼び出せる機能

常に表示されているパーツ以外にも、ゲームをプレイする際に必要な機能は他にもありますよね。セーブやロード、設定などです。

これらのメニューや機能は普段は画面上に表示されていない事が多く、それぞれ対応したボタンを押す事で呼び出す事が出来ます。
(※「MENU」が常に表示されていたり、各機能がメッセージウィンドウの下に表示されている場合などもあり)

乙女ゲームでプレイ中に呼び出す事の出来る機能は、

①「セーブ/ロード」
その名の通りセーブやロード。タイトル画面に戻るのも大体ここから。
②「クイックセーブ/クイックロード」
ボタン1つ(もしくは2つ)でセーブやロードが出来る。
③「オートON/OFF」
上記でも説明した台詞の自動再生のON/OFFが切り替えられる。
④「スキップ」
既読の部分をスキップする事が出来る。速度は自由に変えられる。
周回する事が多い乙女ゲームにおいて大事な機能。もちろん未読でもスキップは出来る。
⑤「履歴(バックログ)」
これまでの台詞の履歴を見る事が出来る。ボイス再生が出来るものが多い。
⑥「メッセージウィンドウなどの表示/非表示」
一瞬で画面上のキャラクター以外のパーツの表示/非表示が切り替えられる。
キャラクターの絵の隠れていた部分や、スチルと呼ばれる1枚絵をじっくり見るための機能です。
⑦「キャラクター/ステータス」
キャラクターのプロフィールや好感度、イベントの発生条件などを見る事が出来る。
⑧「用語解説」
ゲーム中に通常した用語の解説。難しい世界観や特殊な設定のあるゲームには必須。
⑨「タイトルに戻る」
タイトル画面に戻ることが出来ます。
⑩「オプション(設定)」
台詞の速度やキャラクターボイスの音量調整など、ゲームの各種設定が出来る。

…など、このような機能が多いです。

これがどのように各種ボタンと連動しているかというと、
例えばとあるゲームでの、ボタンと機能の関係はこのようになっていました。
※S社の某携帯ゲーム機です。

「クイックセーブ」や「履歴」「スキップ」「表示/非表示」といった即時に行いたいものはボタン1つで出来るようになっていました。
このゲーム以外にも基本ワンタッチで行いたい操作はボタン1つで呼び出せるものがほとんどでした。ストレスフリー。
セーブやロード、キャラクターのページなど画面自体が切り替わるものはメニューを呼び出して開くようになっています。

選択肢や好感度などのUI

ノベル形式なので読み進めていく事がメインですが、「ゲーム」ですのでただただイケメンとのストーリーを読んでいくだけでは話は何も発展していきません。
途中で「選択肢」というものが登場します。この選択によってルート分岐というものが行われ、ハッピーエンドかノーマルエンドかバッドエンドか…つまりは結末がわかれていきます。

選択肢は乙女ゲームにおいて運命を左右するものといっても過言ではありません。なので、どの選択肢を今自分が選択しようとしているか、見てわかりやすいように工夫されている事が多いです。(色が違う、カーソルが表示される…など)
ちなみにこの画像の選択肢の場合、真ん中の選択肢が大正解です。1番上は普通、1番下は論外ですね。

そして正解(1番好感度があがるもの)を選んだ場合、その証拠としてエフェクトが出る事が多いです。

正解が可視化される事で「よかった~合ってた~!」という安心を得る事が出来ますね。逆に出なかったり、好感度が下がるエフェクトが出ると焦ります。切羽詰っているとクイックロードで選択肢のちょっと前に戻ったりします。シビアな世界なので。
また、正解がわかる事によって「このキャラはこういう返しをされるのが好きなんだな?」と、なんとなく性格が読めてくるのでその後の選択肢も選びやすくなります。

その他、気になったゲームの工夫

これは私が今までプレイした中でユーザーに配慮されているな…と思った要素の一つなのですが、
とあるゲームで「主人公(つまりプレイヤー)」の顔の描写をON/OFFに出来るという機能がありました。
恋愛シミュレーションゲームにおいて、主人公を自分と重ねて実際に自分がキャラクターと恋愛している気分になるか、はたまた第三者の視点で主人公とキャラクターの恋愛模様を楽しむかプレイスタイルは人それぞれです。でも前者だった場合、あまりにも主人公の個性が前面に出ているとちょっと没入出来ないよ…って人がいるかもしれません。
そこで「イベントCG(1枚絵で表示されるイラストのこと)」で表示される主人公の表情をOFFにする事が出来る!という機能のついているゲームがあり、没入系プレイヤーへの配慮がされていて手が込んでいるなあと思いました。だって表情ありとなしの2パターン用意されているわけですからね…。
イベントCGの顔は消せなくとも、メッセージウィンドウ横に表示される主人公の顔をOFFに出来るゲームも多いですね。

まとめ UIが生み出す世界観

ノベル形式のゲームでは、メッセージウィンドウなどの要素はゲームをプレイしている間、常に目に入ってくるものになります。
メインはキャラクターや背景などのグラフィックかもしれませんが、UIもゲームの世界観の一部を表現しているといっても過言ではありません。私はどんなにキャラクターや背景の絵が綺麗でも、それをとりまくUIに手が込んでいなかったらなんだかテンション下がってしまいます…。
例えば幕末が舞台で新撰組隊士と戦争の中恋愛していくシリアスなお話なのに、UIがピンクでキラキラしたメタリック!だとおかしいですよね。和風のお話ならUIも和風なテクスチャを使用したり、使うフォントもゴシック体よりは明朝体とかだと世界観を壊さずにゲームをプレイする上でしっくりきます。
もちろんこれは恋愛シミュレーションゲームに限った話ではなくどんなゲームのUIにも言える事ですが、常に視界に入ってくるノベル形式の恋愛ゲームでは特に大事と言えるのではないでしょうか。

乙女ゲームがUIによってどんな世界観を生み出されているか、どれほど手が込んでいるのか、気になった方は是非乙女ゲームブランドさんのサイトを見てみてください。


以上、UI/UXについて考える【女性向け恋愛シミュレーションゲーム編】ユイPがお送りいたしました。
この記事で例にあげたゲームが何かわかった貴方はユイPのお仲間です♥

★ユイPおすすめ乙女ゲームをツイートするかも?
デジマースブログ公式Twitter

エレベーターの開閉ボタンについて

身の回りのUI第2弾です。

エレベーターの「開ける・閉める」ボタンが間違えやすいという話を昔からよく聞きますよね?未だにこの話を聞くということは、車のワイパーが未だに昔と変わらず棒が左右に動き水をよけている事と同じで、もはや解決策がないのかもしれません…

ということで、今回はエレベーターの開閉ボタンが間違えやすい理由についてあれやこれやと考えていきたいと思います。

※本文中に出てくる「かご」とはエレベーターの人が乗る箱状の部分の事です。


では、突然ですが問題です。
どちらがエレベーターの「あける」ボタンでしょうか?

左ですね。

簡単に答えることができたはずです。

「あれ?いつもは迷うけど、今回は迷わなかったな」と思った方もいらっしゃるのではないでしょうか?

迷わなかった理由は“状況が違う”からです。

エレベーターで「開ける/閉める」の二択を迫られるときは「慌てて人が駆け込んできた」「早く閉めたい」など慌てている状態が多いですが、今回は違いますよね?自宅やオフィスで、ゆっくりしながら落ち着いて答えましたよね?(多分ですが…)

人は焦るとパフォーマンスが低下し、ミスを起こします。焦るという状況が発生しやすい環境も改善する必要があるため、開閉ボタンの問題をアイコンのデザインだけで解決するのは難しいかもしれません。ですが今回はアイコンのデザインでミスを軽減しようという考えのもと話を進めます。

なぜ間違うのかを考える

1.ひらくボタンを押すまでの手順の問題

ドアが閉じるまでは4秒前後です。その4秒前後で「ひらくボタン」を見つけて押す必要があります。ドアが閉まりかけの時に人が乗ろうとしてきた場合は4秒も確保できません。
このことから分かるように、アイコンデザインの良し悪し以前に押すまでの時間が短いという問題があります。
エレベーターのボタンは、どちらが「開く」か「閉じるか」に迷うよりも先に“探す”という行為を先に行う必要があります。ですので、開閉ボタンのデザインは「限られた時間でいかに早く見つける事ができるか」が重要になってきます。

※ちなみに…車椅子用ボタンを押すと閉まる時間が10秒ほどになります。また、エレベーター内のミラーは、車椅子の方がバックで降りるために設置されています。(かごの中で回転するのは難しいためです)

2.アイコンのデザインの問題

エレベーターの開閉アイコンは同じようなデザインのものが多いのですが、規格により統一されているわけではないので、アイコンを記憶しても意味はありません。統一してくれればいいんですけどね…。
開閉ボタンのアイコンは、迷わず行動に移せるほど分かりやすく、誰が見ても同じ意味を想像できる形が理想的です。そこを踏まえた上で現在頻繁に見かけるアイコンについて考えると、完全なものではないように思えますのでその理由について説明いたします。

頻繁に見かけるアイコンのデザインがわかりにくい理由

こちらのアイコンはよく見かけますが、パッと見た時に、どちらなのだろうかと迷い、結局補足の文字に頼ることが多いので、なぜ間違えやすいのかについて考えてみたいと思います。

1.ひらいている様子が伝わりにくい
「ひらく」も「とじる」も中心に矢印が寄せてあり、どちらも閉じていると言われれば閉じているように見えます。

2.ドアなのかが分からない
矢印のみだと、何がどのように動くのかが分かりにくいです。シンプルですがパッと見た時の情報が少ないです。

3.三角形だと矢印として伝わりにくい
人によっては矢印という意味よりも先に三角形ととらえる可能性があります。情報量を減らすという意味では成功していますが、「矢印」「三角」のどちらにも見えるとういあいまいな状態は、ナビゲーション目的のデザインにおいては避けるべきです。

以上のことからアイコンは「“何がどう動くのか”あいまいな表現を避けてハッキリと伝える」ことが重要となることが分かりました。


今回はボタンの開閉が間違えやすい理由についてあれやこれやと考察してみましたが、「限られた時間でいかに早く見つける事ができるか」「“何がどう動くのか”あいまいな表現を避けてハッキリと伝える」ことが重要なのではということが見えてきました。
ほとんどのエレベーターのボタンは「左がひらくボタン」です。また、色が付いているならば「色がついているほうがひらく」です。もちろん全てのエレベーターにあてはまるわけでは無いのですが、ほとんどがこのようになっています。
このような情報をユーザーが予め持っていればいいのですが、当然そうはいきません。そもそもUIデザインではユーザーの知識や経験を頼りに設計することはあってはならないことです。ユーザーは何も知らないし、間違うことを前提に設計する事が基本です。
少し話がそれましたが、今後もエレベーターのボタンに関して気になることがあれば記事にしたいと思います。
それではまた次回

(はら)

簡単!Premiere Proの使い方【テロップ編】

こんにちは!
今回のテーマは「簡単!Premiere Proの使い方【テロップ編】」です。
Premiere Proでテロップを作る方法をご紹介したいと思います。

こちらのネコの動画にテロップを入れてみたいと思います。

Premiere Proの立ち上げ方や、素材の読み込み方について知りたいと言う方は、簡単!Premiere Proの使い方【立ち上げと読み込み編】もご覧ください!
Premiere Proの立ち上げ方と素材の読み込み方、基礎的な名称の説明をしています。


使用するソフト

■Premiere Pro(プレミアプロ)
※バージョンは「CC 2018」を使用しています。


テロップの開始位置を決める

まず初めにテロップの開始位置を決めます。
開始位置を決めるには、「タイムラインパネル」の「時間インジゲーター」を左右に動かしてください。
「時間インジゲーター」と「プログラムモニター」は連動していますので、プログラムモニターで映像を確認しながら任意のタイミングに調整します。

もっと細かく調整したい時は、タイムラインパネルかプログラムモニターを選択した状態で、キーボードの矢印キーの左右で時間インジゲーターを動かします。
または、プログラムモニターの戻るボタンか進むボタンでも大丈夫です。
こうすることでコンマ単位の繊細な調整をすることが出来ます。

ここで1つ注意なのが、この段階でコンマ単位の調整に時間を掛けすぎない事です。
ガチガチに決めても、後々、実際にテキストを入れたりエフェクトを掛けた時に調整したくなるからです。
まずはザックリ位置を決めるまでに留めて、後で細かい調整をする気持ちで進めましょう。

参考までに、私がよくやる流れを書いてみます。
①テロップを入れたい大まかな位置の辺りまで時間インジゲーターを動かす。
②プログラムモニターの再生ボタンを押して動画を再生。テロップを入れたいタイミングで停止する。
※この工程はなくても良いのですが、動画の動きやテンポを確認しながらテロップの位置を決めたい時にやりやすいのでオススメです。
③タイムラインパネルかプログラムモニターを選択した状態で、キーボードの矢印キーの左右で時間インジゲーターを調整する。


テキストを入力する

次にテキストを入力します。
「ファイル」→「新規」→「レガシータイトル」を選択すると、下の図のような「新規タイトルウィンドウ」が表示されます。

設定したい項目があれば変更し、特に指定がなければそのままOKを押して下さい。

タイムベースについては、動画の設定に合わせておけば大丈夫です。
今回で言うと、ネコの動画が「59.94fps」の設定になっていたので図のような数値になっています。
ちなみに、「名前」の項目は設定した物がプロジェクトパネルに反映されます。後々編集できますのでこのまま進めてしまっても大丈夫です。

新規タイトルウィンドウのOKを押すと、画面は下の図のようになっているかと思います。

プロジェクトパネルにタイトル01が追加されていますね。
更に、プログラムモニターの表示が少し変わりました。これは「タイトルパネル」が表示された状態です。タイトルパネルではテキストの入力や編集が出来ます。
上部のパネルを切り替える事でデフォルトのパネルとタイトルパネルを切り替える事が出来ます。
また、時間インジゲーターを触ってもデフォルトのパネルに切り替わります。

次に、「レガシータイトルツール」で「横書き文字ツール」などを選択します。
横書き文字ツールを選択した状態でプログラムモニターをクリックすると、テキストが入力できるようになります。
テキストの位置は、「レガシータイトルツール」の「選択ツール」で好きな所へ移動させることが出来ます。

ここまで出来たら、プロジェクトパネルに作成したタイトル01のクリップをタイムラインパネルにドラッグします。
この時、時間インジゲーターにクリップの左端がピッタリくっつくようにします。
こうする事で、1番初めに決めたテロップの開始位置からテキストが表示されるようになります。

テロップが表示されている時間は、タイムラインパネルのタイトル01のクリップの端を左右に伸縮させることで調整する事が出来ます。

余談ですが、私の場合、タイムラインパネルにクリップを入れた段階で一度レンダリングして保存します。
学生の頃、映像の授業の教授に「レンダリングだけは小まめに掛けて保存しておくように。これだけ出来れば何も怖くない。レンダリングレンダリング…」と言われました。
この言葉が頭に焼き付いているので、レンダリングバーが赤くなろうものなら即刻レンダリングして保存します。
レンダリングをする意味としては、ザックリ言うと処理が重くならないようにする為です。
レンダリングしていないデータが多いと、Premiere Proの処理速度が落ち、場合によっては固まって強制終了…なんて事もあります。
保存を小まめにしていなかった場合、何時間もかけて編集したデータが飛びます。想像しただけで心臓がキュッとなりますね。
心配な方は小まめにレンダリングと保存をして下さい。

また、小まめにレンダリングするメリットとして、レンダリング時間があります。
情報量が少なければ数秒で済む場合もありますし、多ければ数時間を要する場合もあります。
小まめにやるか、後でまとめてやるか、そもそもやらないか、作業スタイルに合わせて試してみて下さい。


フォントを編集する

テロップのフォントを変えたり、スタイルを付けたりすることが出来ます。
プログラムモニターの上部には、フォントやサイズ、カーニングなど基本的な設定をする項目があります。

「レガシータイトルプロパティ」では、カラーを変えたり影を付けたり、より細かい編集作業が出来ます。
また、「レガシータイトルスタイル」では、登録されたスタイルを選ぶことが出来ます。デフォルトで登録されているスタイルもあれば、自分で作ったスタイルを保存して使う事も可能です。

「レガシータイトルスタイル」でスタイルを選んだ後、「レガシータイトルプロパティ」で微調整する事も出来ますので、イメージに合うフォントを作ってみて下さい。


エフェクトを付ける

テキストにエフェクトを付けます。
「エフェクトパネル」に様々なエフェクトがありますが、今回は「ビデオトラジション」の「ディゾルブ」を使います。
ビデオトラジションのディゾルブを、タイムラインパネルのタイトル01のクリップの両端にドラッグします。
こうする事で、フェードイン、フェードアウトの効果を付けることが出来ます。

エフェクトはいらないな、と言う場合は「Back Spaceキー」や「Deleteキー」で消せます。

また、クリップに付けたエフェクトを左右に伸縮させることで、エフェクトの表示時間を調整する事も出来ます。
伸ばすとゆっくりエフェクトの効果が表れ、縮めると早く表示されます。

今回はディゾルブを使いましたが、他にもエフェクトは沢山あります。
また、エフェクトの種類にもよりますが、テキストだけでなく、動画などクリップであれば何にでも付けることも可能です。
色々付けたり消したりしてみると楽しいので、ぜひお試しください。

ここまで来たら動画の編集作業は完了です!

あとは書き出して終わりです。
「ファイル」の「書き出し」から「メディア」を選択してください。
「書き出し設定」が表示されます。設定の変更は画面右側で出来ますが、特に指定がなければデフォルトのままで大丈夫です。
「書き出し」ボタンを押すと書き出されます。
動画の長さによって書き出し時間も数秒~数時間と変わってきますので、気長に待ちましょう。

書き出せたらテロップの作成は完了です!おつかれさまでした!


おわりに

いかがでしたでしょうか?
最後となりましたが、今回作った動画はこんな感じになっています。


※この動画はブログ掲載用に設定を調整しています。

動画を作るのは難しいイメージがあるかもしれませんが、作り始めてみると色々手を加えたくなって楽しいものです。
テロップも作ってみると意外と簡単ですので、ぜひ試してみて下さい!

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

簡単!ラフと回転ツールでほぼ完成!《輪切りの野菜・果物の作り方》

*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*

早速ではございますが、イラストレーター(以下:イラレ)で簡単に作れる輪切り野菜と果物の作り方を紹介したいと思います。
ラインナップとしましては『レンコンニンジンキウイ』となっております!

1.レンコン
2.ニンジン
3.キウイ

輪切りのレンコン

—————————————————————–
★作成環境:IllustratorCC2018
★動作確認:Windows10
※所要時間:下記内容で10~15分ほど(初心者)
—————————————————————–
※説明がしやすいようにある程度のサイズを決めております。

【1】
①幅400px 高さ400pxの円を用意。
[淵:c4c1ab/塗:e2e1d3]

【2】
①[Alt+C+D+R(効果→パスの変形→ラフ)]で以下のように設定します。

②オブジェクトを扱いやすくするため、ラフ効果をかけたオブジェクトを選択した状態で[オブジェクト→アピアランスを分割]をします。

【3】
オブジェクトの真ん中に[30px×30pxの円]を配置します。
同時に[70px×120pxの楕円]も上部に配置します。
どちらも[淵:c4c1ab/塗:c4c1ab]

【4】
①楕円を選択しツールの[回転ツール]を選択します。
②画像の真ん中に回転ツールの回転軸が出てきます。
③真ん中の小さな円の中をクリックし回転軸を移動させます。

④回転軸の場所を決めたら、Altを押しながら、回転軸をクリックします。編集画面が出てきます。
⑤角度、プレビューにチェックを入れたのちOKは押さず、コピーをクリックして画面を閉じます。
⑥画面をとじたら、自動的に1つ画像が増えますので、残りのオブジェクト4つを[Ctrl+D(4回)]で増やします。

【5】
①コピーした楕円6個選択しツールの[回転ツール]を選択し
[Alt+C+D+R(効果→パスの変形→ラフ)]で以下のように設定します。

②オブジェクトを扱いやすくするため、ラフ効果をかけたオブジェクトを選択した状態で[オブジェクト→アピアランスを分割]をします。

【最後】少々調整を行ってレンコンの輪切りの完成です!

輪切りのニンジン

—————————————————————–
★作成環境:IllustratorCC2018
★動作確認:Windows10
※所要時間:下記内容で10~15分ほど(初心者)
—————————————————————–
※説明がしやすいようにある程度のサイズを決めております。

【1】
幅400px 高さ400pxの円を用意。
[淵:e25b00/塗:ff8b00]

【2】
①[幅350px 高さ350px]の円を内側中央に配置。
②[淵:なし/塗:ff9f19]
③[Alt+C+D+R(効果→パスの変形→ラフ)]で以下のように設定します。

④オブジェクトを扱いやすくするため、ラフ効果をかけたオブジェクトを選択した状態で[オブジェクト→アピアランスを分割]をします。

【3】
①[幅190px 高さ190px]の円を内側中央に配置。
②[淵:なし/塗:ffb839]
③[Alt+C+D+R(効果→パスの変形→ラフ)]で以下のように設定します。

④オブジェクトを扱いやすくするため、ラフ効果をかけたオブジェクトを選択した状態で[オブジェクト→アピアランスを分割]をします。

【4】
①[幅156px 高さ156px]の円を内側中央に配置。
②[淵:なし/塗:ff8b00]

【5】
①[幅3px 高さ60px]の楕円を上部に配置。
②[淵:なし/塗:ff8b00]

【6】
①楕円を選択しツールの[回転ツール]を選択します。
②画像の真ん中に回転ツールの回転軸が出てきます。
③円の中心をクリックし回転軸を移動させます。

④回転軸の場所を決めたら、Altを押しながら、回転軸をクリックします。編集画面が出てきます。
⑤角度、プレビューにチェックを入れたのちOKは押さず、コピーをクリックして画面を閉じます。
⑥画面をとじたら、自動的に1つ画像が増えますので、残りのオブジェクト2つを[Ctrl+D(2回)]で増やします。

【最後】ニンジンの輪切りの完成です!

輪切りのキウイ

—————————————————————–
★作成環境:IllustratorCC2018
★動作確認:Windows10
※所要時間:下記内容で10~15分ほど(初心者)
—————————————————————–
※説明がしやすいようにある程度のサイズを決めております。

【1】
①幅400px 高さ400pxの円を用意。
[淵:826f30/塗:9ac44b]

【2】
①[Alt+C+D+R(効果→パスの変形→ラフ)]で以下のように設定します。

②オブジェクトを扱いやすくするため、ラフ効果をかけたオブジェクトを選択した状態で[オブジェクト→アピアランスを分割]をします。

【3】
①[幅300px 高さ300px]の円を内側中央に配置。
②[淵:なし/塗:aad156]
③[Alt+C+D+R(効果→パスの変形→ラフ)]で以下のように設定します。

④オブジェクトを扱いやすくするため、ラフ効果をかけたオブジェクトを選択した状態で[オブジェクト→アピアランスを分割]をします。

【4】
①[幅120px 高さ120px]の円を内側中央に配置。
②[淵:c1d643/塗:ddd69f]
③[Alt+C+D+R(効果→パスの変形→ラフ)]で以下のように設定します。

④オブジェクトを扱いやすくするため、ラフ効果をかけたオブジェクトを選択した状態で[オブジェクト→アピアランスを分割]をします。

【5】
①[幅10px 高さ66px淵:なし/塗:8faf2e]と
[幅6px 高さ12px 淵:なし/塗:414240]の楕円を作成し
以下のように組み合わせグループ化(Ctrl+G)します。

【6】グループ化したら中央の円にかかるよう上部に配置します。
①楕円を選択しツールの[回転ツール]を選択します。
②画像の真ん中に回転ツールの回転軸が出てきます。
③円の中心をクリックし回転軸を移動させます。

④回転軸の場所を決めたら、Altを押しながら、回転軸をクリックします。編集画面が出てきます。
⑤角度、プレビューにチェックを入れたのちOKは押さず、コピーをクリックして画面を閉じます。
⑥画面をとじたら、自動的に1つ画像が増えますので、残りのオブジェクト34つを[Ctrl+D(34回)]で増やします。

【最後】キウイの輪切りの完成です!


最後に

以上輪切りの果物・野菜の作成の仕方をご紹介させていただきました。
ラフツールも回転ツールも慣れてしまえばとても簡単です。
ここでは説明がしやすいように数値を決めておりましたが、作成したい大きさによって効果の加減などが変わってきますので、いろいろ試してみて下さいね!

次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。
それでは、スガがお送りいたしました。またお会いしましょう!

スマホ画面CSSレイアウト:グラフィックデザイナー向け

グラフィックデザイナーはペーパーレス化の流れにより、紙からデジタル画面に関わることが多いのではないでしょうか。

今回は最低限の配慮レベルではありますが、贅沢な環境が整っている現在において求められる、「デザイナーとエンジニア間の温度差を減らせる」WEBページレイアウト作りを紹介致します。


まずは枠(要素)取り

紙でもWebでも同じです。
レイアウトをするときは大きなカテゴリから小さいコンテンツまでを枠(以後要素)取りしていきます。
「html」「body」タグの要素は、全体を包括する要素として存在しています。

Webコンテンツはインタラクティブ(双方向)に利用者が操作することが多いので、サイズを指定したレイアウトや装飾を行う各要素に対しては、名前(idやClass)を付けておく必要があります。

idはレイアウト構成項目ごとに別の名前で設定し、classは繰り返し使う装飾表現のセットとして使いまわします。

同じ名前のidは1ページ中に1回しか設定できません。(「特集コーナー」など同じ項目名が複数存在することはないとおもいますが)

名前つけをしなくてもdivタグとして要素自体は見えない形で存在していますが名前つけをしていないとCSSによる装飾に対応できません。
そして、装飾以外にもインタラクティブなメリットがあり、
例えば、利用者の性別に応じて特定の名前を付けた広告枠の表示/非表示を動的に制御する場合にも使用します。

「枠取り」「空白のデザイン」「コンテンツ優先度」を設定することは紙面を作る場合と変わりないのです。


機能をもつ表現の場合

単純な画像や文字組の配置であればそのまま実運用してしまっても問題ないですが、
デザイナーに立ちはだかるのは、「タブ」や「カルーセルパネル」などの機能です。

これらはスキルが必要なので、ありもののソースをコピペするか、
実運用を考慮して正しい要素を配置(正しいマークアップ)をしていきましょう。

表現は、画像イメージで作り上げるのは簡単ですが、コーディングする際HTMLで再現出来なければ絵にかいた餅です。

しっかりと実運用と同じ制御下のパーツ構成で作る必要があります。

どの部分が押されたら画面を書き換えるアクションが起こるのかを意識する必要があり、UI情報デザイン上では押せる部分と押せない部分のわかりやすさは、画面イメージを製作するデザイナーは意識する必要があります。


文字など全体設定を入れておく

とりあえず、
CSSファイルの一番上に下記をコピペしておきましょう。

@charset "utf-8";
/* CSS Document */

html {
	font-size:62.5%;/*10pt基準*/
}

body {
	margin: 0px;/*ページ全体周りの余白がなくなる*/
	font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3",Hiragino Kaku Gothic Pro,"MS Pゴシック",sans-serif;
	font-size: 12px; font-size: 1.2rem;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	background: #ffffff;
	line-height: 1.4;/*文字行間設定*/
	height: 100%;
}

重要)「全角スペース」がソース中に含まれると、正しく動きません


CSSによるオブジェクトの座標操作

いよいよデザイナーのスキルを発揮する工程に入ります。

各パーツは設置するだけでは縦に並ぶだけですので、
横並びにしたり回り込んだりはCSSでの設定が必要です。

CSSの命令文やソースをは覚える必要はありません。
CSSを使える人でも使用頻度の少ない命令文はすぐ忘れてしまうそうですので、
ソースの横にコメントアウト(/*機能説明*/)で機能説明を書いたものをコピペして手軽に使っていきましょう。

<< 配置の色々を紹介 >>

【枠/パネル】

width:90%; /*横幅*/

padding-top: 50%; /*アスペクト固定*/
height:auto;/*親要素の高さを、格納した子要素の高さで合わせる*/

border: 1px solid #000000; /*枠線の設定*/
border-radius:6px; /*角丸具合*/
margin: 2em 5% 2em 5%; /*上、右、下、左の要素周りの空き具合*/

background: #ffffff; /*オブジェクトの塗り*/
box-shadow: 2px 2px 0px #00254A; /*シャドウ*/
-webkit-box-shadow: 2px 2px 1px #00254A; /*シャドウ_Google Chrome, Safari用*/
-moz-box-shadow: 2px 2px 0px #00254A; /*シャドウ_Firefox用*/

【テキスト】

text-align: center; /*テキストの揃え*/
font-size: 12px; font-size: 1.2rem; /*テキストサイズ(pxとrem両方同じ数値で)*/
color: #333333; /*テキストの色*/
padding: 1em 0% 1em 0%;/*テキストから要素四辺までの空き具合*/

list-style:none; /*リストマーク「・」を消す*/
font-weight:700;/*文字強調*/
font-style:normal;

【罫線】

hr.keisen {/*罫線*/
    border: 0 none; 
    height: 1px; 
    color: #696969;
    background-color: #696969;
	}

【位置/並び/回り込み】

display:block; /*要素の縦並び*/
display:inline; /*要素の横並び(テキスト制御など)*/
display:inline-block; /*横並びで一部inline特性*/
float:left; /*浮動独立させ右寄せする*/
overflow:hidden; /*子要素のはみ出た部分は表示されない*/

【要素の表現】

opacity:0.5; /*要素を透過*/
background-color:rgba(255,255,255,0.5); /*背景を透過*/

【重なり順序】

position:relative; /*要素のデフォルト表示位置を基準とする設定(相対)※z-indexに必要 */
z-index: -1; /* 重なり順序の設定*/
position:absolute; /*親要素の位置を基準とする設定(絶対)※z-indexに必要 */
z-index: -1; /* 重なり順序の設定*/

最後に

以上の基本的な設定だけでも数値を調整して想定レイアウトの再現に一部活用出来ると思います。

実運用ではブラウザ依存や機種依存など、またまだ補う設定が必要ですが、
エンジニアの方になかなか伝わりにくい要素間の空き具合だけでも最低限伝えられるのではないでしょうか。

ペンやマウス、illustratorから、
HTML/CSSに持ちかえて、
ダイレクトにインタラクティブ性がある絵が描けたら効率的ですね。

このページは今後も修正と追加をしていきます。

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

画像トレース&ライブペイントで簡単なイラストを描いてみよう

こんにちは!ユイPです。
だんだん暑さを感じる時期になってきましたね。

今回のテーマは「Illustratorで”画像トレース”と”ライブペイント”を使ってイラストを描いてみよう」です。
Illustrator(以下:イラレ)でパスを描くのが苦手だなあ…という方(私)でもこの2つの機能を使えば簡単にイラストを描く事が出来ますよ!


使用ソフト:Adobe Illustrator CC 2018
作業環境:Windows 7


最初に「そもそも画像トレースやらライブペイントって何だっけ??」という方のためにどういう機能かご紹介します。

画像トレースは、写真などを一瞬でベクター画像にしてくれる機能です。
例えば左側の写真に画像トレースを行うと、右のようになります。ちょっとイラストっぽくなりましたよね。

ライブペイントは、パス内に塗り絵のように色をつける事が出来る機能です。
タルトの手前にあったいちごの色を少し鮮やかにしてみました。

これらが”画像トレース”と”ライブペイント”の機能です。(詳しいやり方はこの後説明していきます)

それではこの2つの機能を使って、簡単なイラストを描いてみましょう!


まずはイラストの主線となるものを用意します。

準備が出来たらイラレで開き、「画像トレース」を行っていきます。

画像トレースの手順は以上になります。

トレースしたらお好みで自由に余分なアンカーポイントを削除したりなどして整えたり、パーツを描き足したりしてみてください。
なんとなく気に入らない部分もここで直してしまいましょう。

調整して完成した主線がこちらになります。

主線が出来たら、「ライブペイントツール」で色を塗っていきましょう。

以上がライブペイントの手順になります。

そして色を塗って完成したものがこちらになります。

どうでしょうか?とても簡単な行程だったのではないでしょうか?

イラレで画像を作成する際、何もないキャンバスに一からパスを形成していく、図形を変形させていく、画像を引いてその上をペンツールでなぞっていく…など色々な方法がありますよね。場面や時間、描くものによって様々なやり方があると思います。
今回はイラストでやり方を紹介しましたが、手書きのロゴを作る時などにもおすすめです。
最初に紹介したように、写真などをトレースすることも出来ますし、Photoshopなど他のツールを使ってデジタル上で描いたイラストをベクター化したい時にも使えるのではないでしょうか。

状況に応じて、ユイPおすすめのこの機能、是非一度使ってみてください★


以上「画像トレース&ライブペイントで簡単なイラストを描いてみよう」ユイPがお送りしました。
くれぐれも5月病にはお気を付けください。ではまた次回!

★毎日更新しているデジマースブログ公式Twitterもよろしくお願いします!


PhotoShopチュートリアル テキストエフェクト「つやつやな金」編

以前のチュートリアルで氷エフェクトと炎エフェクトをご紹介いたしました。はらです。
テキストエフェクトの記事は比較的人気が高く、PhotoShop使いの皆さんはやはりテキストエフェクトが好きなんだな~~と感じた今日この頃。
と、言う事で今回は、テキストエフェクトをご紹介したいと思います。氷、炎とつづき今回は…

「金」

金です! “つやつや”な金です!

「なんだ…金のテキストエフェクトなんてこの世界にごまんとあるじゃないか…なにを今更…」と思った方もいるかと思います。
しかし今回は、今までにない独特なツヤ感のエフェクトをオリジナルで考案してきたので、他にはない見た目になるはずです。

今回のエフェクトは簡単です!簡単ですが、見た目的には手の込んだ仕上がりになります。
金のエフェクトは利用頻度が高いので、是非ブックマークをしていざというときに使ってみてくださいね!

——————————————————
PhotoShop CC 2018を使用しています。
——————————————————


●PhotoShop上部メニューバーより、「新規」→数値を入力(下記画像参照)→「作成」をクリックし、アートボードを作成します
※「幅」の数値はテキストの長さに応じて変更してください。

●テキストツールで文字を配置し、文字設定を下記画像のように変更します
太めのフォントがオススメです。今回は「A-OTF UD新丸ゴ/H」を使用していますが、好みや作業環境に合わせ、お好きなフォントを使用してください。

コピー用テキスト「# cb0303」

●「つやつや」テキストレイヤーを「新規レイヤーを作成」アイコンにドラッグし、複製(「つやつやのコピー」レイヤーを作成)し、エフェクトをかけるためのレイヤーを用意します

補足
レイヤーを複製する方法は他にもあります
方法① altを押しながら任意の階層にドラッグ
方法② コピー元レイヤー上で右クリック→レイヤーを複製

●「つやつや」テキストレイヤー上で右クリック→「スマートオブジェクトに変換」をクリック

●「つやつやのコピー」レイヤーをダブルクリック→「レイヤースタイル」を2つ適用(下記画像参照)
これによりツヤ感を加えることができます。

コピー用テキスト①「# ffc485」 ②「# ff8b36」

それっぽいつやがでましたね。

●「つやつやのコピー」レイヤーを選択し、上部メニューバーより「フィルター」→「ぼかし」→「ガウス」の順でクリック。その後「ぼかし(ガウス)」ウインドウで「6.0」と入力

●「つやつやのコピー」レイヤーを選択した状態で右クリック→「クリッピングマスクを作成」をクリック
これにより不要な部分を隠します。

補足…
上記の右クリック以外の方法でもクリッピングマスクを作成する事ができます。むしろこちらの方がおすすめです!

1. 「つやつやのコピー」レイヤーを選択します

2. option(Windows=Alt)を押し「つやつやのコピー」レイヤーと「つやつや」レイヤーの境目にカーソルを移動させます

3. カーソルが変化するのでそのままクリック

こちらのほうがより楽に、早く作成することができます。クリッピングマスクは頻繁に使われる機能ですので、初心者の方などは覚えておくと便利です!

●「つやつやのコピー」レイヤーを選択し、レイヤーパネル上部から描画モードを「ビビッドライト」に変更します

●「つやつやのコピー」「つやつや」レイヤーを選択し、レイヤーパネル下部「新規グループを作成」アイコンをクリックして一つのグループにまとめます。

●「グループ1」を選択した状態でレイヤーパネル下部「塗りつぶしまたは調整レイヤーを新規作成」アイコンをクリック→「色相・彩度」をクリックし、数値を下記画像と揃えます

●完成です

●使用例


いかがでしたか?さくっと作れたのではないでしょうか?今回は色味を調整レイヤーの「色相・彩度」で変更していますので、スライダをいじるだけで簡単に色を変えることができます。黄色系以外に変更するとプラスチックのような樹脂系のツヤを表現することができますので是非試してみてください!

(はら)

簡単!Premiere Proの使い方【立ち上げと読み込み編】

こんにちは!
今回のテーマは「簡単!Premiere Proの使い方【立ち上げと読み込み編】」です。
Premiere Proの基礎用語の説明を交えながら、プロジェクトの立ち上げから素材の読み込み方についてご紹介したいと思います!

Premiere Proで動画を作りたいけど、どうすればいいかわからない…、上手くいかない…とお困りの方!
これが理解出来れば、初心者の方でも簡単に操作出来るようになりますので、ぜひご覧ください。
ゴールは、タイトル通り「Premiere Proを立ち上げて素材を読み込む所まで」です。


使用するソフト

■Premiere Pro(プレミアプロ)
※バージョンは「CC 2018」を使用しています。


事前準備

Premiere Proを開く前にやるべき、大切な事前準備があります。
それは、これから作るPremiere Proのファイルや使用する素材を保存する場所を決め、フォルダを準備しておく事です。
保存場所はローカルでもネットワークでも良いので、使用するファイルは全て1ヵ所にまとめておくようにして下さい。
私はいつも、保存する場所を決めたら下記の図のような感じでフォルダを準備します。

何故こうするかと言うと、Premiere Proに素材を読み込んで作業する場合、リンクしか出来ないからです。
Illustratorのように素材を埋め込むことは出来ません。
その為、作業途中に素材を別フォルダに移動させたり、ファイル名を変更したりすると、Premiere Pro上でリンクが途切れてしまいます。
リンクを再設定するのが大変なので、保存場所は最初に準備しておきましょう。


プロジェクトの立ち上げ

まずはプロジェクトを立ち上げます。
今回は例として新規プロジェクトから立ち上げます。
すでに動画データがある方は任意のプロジェクトを開いてくださいね。

新規プロジェクトを押すと、新規プロジェクトの設定画面が出てきます。
タイトルと動画の保存場所を設定してください。
他の項目は、特に設定したい物がなければ、下記の図のような初期設定のままで大丈夫です。

OKを押すと、新規プロジェクトが立ち上がります。


ワークスペースについて

プロジェクトが立ち上がった所でさっそく動画を作って行きたいのですが、その前に…。
初めてPremiere Proを使う方の為に、まずは「ワークスペース」について説明したいと思います。

Premiere Proは細かい編集画面が多く、初めて見ると戸惑い、ハードルが高く感じる方も多いのではないでしょうか?
私は初見でかなり戸惑った上に、もう動画作るのやめようかしらとすら思いました。
下記にワークスペースの名称と簡単な役割をまとめました。
こちらの要素さえ理解してしまえば、不安な気持ちは軽減されると思います!

■プロジェクトパネル
動画や音源、静止画など素材全てをまとめておく場所です。
また、Premiere Proに入れた素材はクリップと呼ばれます。

■ツールボックス
タイムラインやプログラムモニターで編集を行う為のツールが表示されています。

■タイムラインパネル
編集作業をする場所です。

■ソースモニター
クリップの編集が個別に出来ます。

■プログラムモニター
タイムラインパネルのクリップを再生する事が出来ます。

■その他の編集パネル
エフェクトやテキストなどの編集が出来ます。

■オーディオメーター
音声レベルの確認が出来ます。


素材を読み込む

素材を読み込む方法ですが、大きく分けて2つあります。
「プロジェクトパネルに読み込む方法」と「メディアブラウザーから読み込む方法」です。

1つ目の「プロジェクトパネルに読み込む方法」ですが、プロジェクトパネルの「プロジェクト」タブ内にドラッグ&ドロップ。
もしくは「ファイルメニュー」の「読み込み」から読む込むことが出来ます。

「プロジェクトパネルに読み込む方法」は、1つ1つ素材を整理しながら進めたい時にオススメです。

2つ目の「メディアブラウザーから読み込む方法」ですが、プロジェクトパネルの「メディアブラウザー」タブから読み込みます。
「メディアブラウザー」タブを選択すると、ローカルやネットワークのドライブが表示されます。

そこから【事前準備】の項目で作った素材フォルダを選択します。
そうすると、右側にフォルダ内のファイルが表示されます。
ここの表示は「リスト表示」「サムネールビュー」の2種類から選べます。サムネールビューの方が見やすいのでオススメです。

そこから使いたい素材を選び、タイムラインパネルにドラッグ&ドロップします。

タイムラインパネルに入れると、自動的に「プロジェクト」タブにも反映されます。

「メディアブラウザーから読み込む方法」は、素材数が多い場合や、使用する素材の順番が予め決まっている場合にオススメです。
ただ、事前に素材の配置順を決めてファイル名でナンバリングしていない場合、意図しない順番で素材が配置される事になりますので注意が必要です。

素材を読み込む方法を2種類紹介しましたが、どちらでも自分のやりやすい方法で進めてみて下さいね。

ここまで無事進められた方…。
おつかれさまでした!これでゴールです!


おわりに

いかがでしたでしょうか?
今回は基礎的な部分の説明でしたが、知らずに挑むと躓きやすいポイントでもあります。
これを覚えたらもうPremiere Proは怖くないも同然ですので、ぜひ覚えてみて下さい!

今後更新予定の「簡単!Premiere Proの使い方【テロップ編】」では、テロップの作り方をご紹介します。
良ければそちらもご覧下さい!

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

簡単!Illustratorでレンガ素材を作る《応用編もあるよ》

*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*

早速ではございますが、イラストレーター(以下:イラレ)で簡単に作れるレンガ素材の作り方を紹介したいと思います。
下の方に応用編も用意しておりますので興味のある方は見て頂けますと幸いです。

簡単!レンガ素材メイキング

—————————————————————–
★作成環境:IllustratorCC2018
★動作確認:Windows10
※所要時間:下記内容で15分ほど(初心者)
—————————————————————–

※説明がしやすいようにある程度のサイズを決めております。

①元になるレンガ作成

【1】横140px 縦60px 色af664b の長方形を用意。
【2】[Ctrl+K(環境設定)]でキー入力を80にします。
オブジェクトを選択したまま[Alt+→→(矢印2回)]で複製します。

【3】上記の“2”を繰り返し行い縦横にオブジェクト数を増やします。
数は一旦このくらいあればよいと思います。

【4】“2”で設定した[Ctrl+K(環境設定)]のキー入力を40にします。
横の偶数列目をすべて選択。

【5】右矢印をクリックし偶数列のオブジェクトを、右へずらします。

②効果をかけてリアルに

【6】レンガをよりリアルに見せるために少々形を変形させます。
レンガ3つを選択し[Alt+C+D+R(効果→パスの変形→ラフ)]
で以下のように設定します。

【7】さらにそのままレンガを選択し、角丸の半径を6pxにします。

【8】次にオブジェクトを扱いやすくするため、全選択した状態で
[オブジェクト→アピアランスを分割]をします。

【9】次にバランスよく色味の変更をします。
今回は最初の色味に対して2色追加してみました。

【10】レンガの後ろに色を敷いて…(今回敷いた色はefd1bd)

【11】マスクをかければ…

応用編

フラットなレンガが出来ましたところで、せっかくなので応用編も用意いたしました!
上記で作成したレンガをちょいちょいと編集をすることで奥行きをつけたいと思います。

【1】クリッピングマスクをかける前の状態のものを用意します。
※もしレンガをグループ化していたら解除しておくと作業が楽になります。

【2】遠近をかけたときに奥の方へ向かう方のレンガ列幅を細くします。
それでは順々に行っていきましょう!↓↓↓

上記のように、だんだんと選択する列を減らしていき、一番上の
列まで繰り返しこの作業を行います。
—-残り————————————————————
一番下から3番目まで以外の列を選択→少し下へ縮小
一番下から4番目まで以外の列を選択→少し下へ縮小
一番下から5番目まで以外の列を選択→少し下へ縮小
一番上のみ列を選択→少し下へ縮小
———————————————————————–

【3】次にレンガとレンガの間の隙間を調整していきます。
こちらも奥の方へ向かう方の幅をだんだんと狭くなるようにします。
現段階では若干奥側の方が狭くなっていますがもう少しメリハリをつけていきます。

【4】オブジェクトを全選択し[Ctrl+G(オブジェクト→グループ)]でグループ化します。
グループ化されたオブジェクトを選択し、
[効果→パスの変形→パスの自由変形]を選択します。

四隅にあるつまみを動かして上辺が短い台形(遠近)になるように調整し、OKをクリック。

遠近がかかったレンガの完成です。

【5】もし形や遠近がいまいちだなと思う場合は、オブジェクトを選択した状態でアピアランスツール内にある「パスの自由変形」をダブルクリックすると再度編集が可能です。

【6】形や遠近に問題が無ければ、オブジェクトを扱いやすくするため、全選択した状態で[オブジェクト→アピアランスを分割]をします。
※アピアランスを分割すると再編集ができなくなるので注意。

プラスα

下記機能を使うとワンタッチとまではいきませんが様々な変形、遠近がかけられます。

【例】

パスをちょっと動かすだけで、変形が出来てしまうのはとても便利ではありますが、変形した図形は再編集できませんので注意が必要です。

最後に

以上レンガの作成の仕方をご紹介させていただきました。
ここでは説明がしやすいように数値を決めておりましたが、作成したい大きさによって角丸の丸さ加減や、ラフ具合などが変わってきますので、いろいろ試して良いレンガを作成してみて下さいね!

次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。
それでは、スガがお送りいたしました。またお会いしましょう!

スマホ画面レイアウトのガイドライン/テンプレート

社内のスマートフォン(以下スマホ)向けのデザインガイドラインから、画面レイアウトデザインに絞って紹介します。


1. ガイドライン化の目的

2. 画面デザインの基本方針

3. HTMLで重要な「viewport」とは?

4. デザインしやすいフォントサイズ土台設定

5. フォントサイズパターンのガイドライン

6. 行間の設定

7. 左右の余白

8. 最後に「高さ」の余白設定


ガイドライン化の目的


ガイドライン化によるメリットを重視しない場合は意味を持ちませんが、テンプレートとして活用することで、サービスの立ち上げを短縮出来ます。

ポイントとして以下の3つでしょうか。

1. ブランディング
担当者の価値観に左右されない統一されたルールと表現


2. 効率化
サービスの立ち上げや運用コスト効率化をはかるため見せ方を統一


3. 精度の向上
都度ガイドラインの改修行い、精度の高いデザインに更新


画面デザインの基本方針


時間をかけてテクノロジーを導入し手の込んだ表層デザインにしても、ユーザーにはメリットがなく、自己満足で終わることがあります。

そういった傾向を回避するための方針が下記です。

1. シンプルに
2. ユーザー目線で
3. 新技術は追わない
4. 第三者チェック
5. 訴求は2~3秒で理解させる
6. アーティスティックな表層デザインは使わない
7. 明確な目的をページ毎に設定

ユーザーの目的達成に必要ではない要素は提供側のエゴになりますので、バッサリと割愛の判断して先に進むことが大事です。


HTMLで重要な「viewport」とは?


まずはスマホで表示されるweb画面の設定によりページの表示範囲や最適化に影響がある土台設定を行います。

ヘッダー領域の「Meta」内に下記「viewport」設定ソースを記述します。

******************Viewportソース_1******************
※ユーザーによるページのズーム不可
(アプリ的な固定画面を再現する場合はこちら)↓
<meta name=”viewport” content=”width=device-width,user-scalable=no”>
******************Viewportソース_2******************
※ユーザーによるページのズーム可
(文字、画像のユーザビリティー重視の場合はこちら)↓
<meta name=”viewport” content=”width=devicewidth,minimum-scale=1.0″>
*******************************************************

「viewport」とは、仮想的なweb表示領域を設定する機能で、
何も設定しない場合、

・iPhoneの場合の初期値は横幅980px
・Androidの場合の初期値は横幅800px

です。

スマホの物理的なティスプレイのリアルな解像度ではなく、
ディスプレイ内で表示される「ブラウザアプリケーション」などの仮想的Web画面表示領域/解像度のことです。

それでは「viewport」の設定による端末画面での見え方の紹介です↓


以上の設定による見え方の違いは理解できましたでしょうか。

スマホの場合は

“width=device-width”

の設定で、各デバイス側で適切にフィット表示してくれますので、設定はまずはじめに行いましょう。

ページ表示の土台が固定されたので次は「フォントサイズの設定」です。


デザインしやすいフォントサイズ土台設定


サービスで扱うフォントの大きさの設定をガイドライン化します。

基準点を統一必要があるため、HTMLタグの中で全体に影響がある「HTML」タグに、フォントサイズの基準設定を行います。

HTMLファイルとは別にCSS(スタイルシート)ファイルを設け、その中に以下の記述をします。

******************** CSSの記述例 ********************
html {
font-size:62.5%; /*10px基準*/
}


p.XXX {
font-size: 10px; font-size: 1.0rem; /*最小*/
}

*******************************************************

この設定を行うことで「rem」のフォント設定時に

1.0rem → 10px

という想定と扱いがしやすい明確な10px基準での大きさの設定がされ、

グラフィックデザイナーが「画面イメージ」をIllustratorやPhotoShopで作成する際に、
ピクセル数単位でフォントサイズの作業が進められます。
それによりコーダーとの組込み時の数値の乖離が少なくなるので有益です。


フォントサイズパターンのガイドライン


フォントサイズが10px単位で扱えるようになったので、ページ内で使用する用途別文字サイズを6種類に絞って設定してしまいます。

これにより都度フォントサイズの設定に時間を取られることがなくなり、各項目ごとに決められたフォントサイズを割り当てることが出来るようになりました。

丁度良い大きさのメリハリをつけた6サイズが下記となります↓

実際のフォントの大きさの違い具合が確認出来るでしょうか。

見出しは大きく、
通常説明文は程良く、
利用者の便益がないレギュレーション上必要な表記文などは必要最低限に小さく設定してます。

フォントサイズはガイドラインとして設定はしてますが、幼児やシルバー世代などにターゲットする場合は見やすくい大きさのルール設定が行われる必要はあります。


行間の設定


行間については表示されるブラウザのデフォルトCSSなど端末依存でのブレが発生しますが、

文字サイズの1.4倍以上~1.7倍まで空ける(推奨)

で設定されていればテキストが読みやすい間隔が確保でき、それ以下になると詰まった読みにくい文章になってしまいます。

******************** CSSの記述例 ********************
body {
line-height: 1.4;  /*文字行間設定*/
}

*******************************************************


左右の余白


左右画面いっぱいまで文字が置かれていると文章体が把握しづらいく読みにくいため、適度な余白が必要です。

ガイドラインでは表示幅全体を100%とした場合の設定を行うことで端末依存に対応できます。

テキストエリアの両サイドに、表示横幅の5%程度を左右にそれぞれ設定。


******************** CSSの記述例1********************
p.XXX {
margin:0 5% 0 5%; /*テキスト横空白設定*/
}

******************** CSSの記述例2********************
p.XXX {
width:90%; /*テキスト横エリア横サイズ*/
margin:0 auto 0 auto; /*エリアのセンター置き*/
}

*******************************************************
以上がフォントサイズまわりの設定となります。


最後に「高さ」の余白設定


ページレイアウトガイドラインの最後の設定は、テキストや画像などの要素間余白の高さです。

***************CSSの記述例_ソース1***************
p.XXX {
    margin:10% auto 10% auto;
    }

***************CSSの記述例_ソース2***************
p.XXX {
    margin:5% auto 5% auto;
    }

***************CSSの記述例_ソース3***************
p.XXX {
    margin:1.875% auto 1.875% auto;
    }

*******************************************************
こちらの設定も絶対的なものではなく、ページ構成の作業を進める上でとりあえずこの値で設定しておけば「おおむね問題ない」値です。

この工程に多くの時間が使えるスケジュールがあれば厳密に設定することは効果的ではあります。

以上のように、サイズや高さや間隔などをガイドライン化することで、実績あるページ設計が効率的に組み込むことができ多くのメリットを生みます。

効率化によって確保できた時間を有効活用してアドバンテージを増やしていきましょう。

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