UIとアニメーションの関係

こんにちは、ハラです。モバイルアプリで何気なく見るアニメーション、実は見た目を良くする為だけにあるのではなく、使用時のストレスや違和感をなくし使いやすさや満足感を高めるために使用されています。今回のブログではそんなUIのアニメーションについてご紹介いたします。

見た目だけじゃないアニメーション

まずは①の画面と②の画面のメニューボタンを押した後の反応を見比べてみてください。①と②でユーザーに違和感を与えないメニューの表示方法はどちらだと思いますか?

  ①    ②

 

大抵の方は②の方を選んだのではないでしょうか? ①ではメニューボタンを押した後にメニューが突然現れました。対して②ではメニューがスライドして現れました。スライドしてメニューが出てきた場合の方が違和感が無いのはなぜか? それはスライドして現れる方が現実に近いからです。現実では魔法のようにいきなり何かが出現することはありません、ユーザの想像を越えない現実に近い動きを加える事で自然でストレスのないメニューの表示が可能となります。①のように「よくわからない場所から突然現れる」という事になると、目線をどこに置くべきか定まらずストレスとなります。
ユーザーは、現実で起きる動きに近い表現に対しては自然に適応します、非現実的なアクションを起こすとユーザーは混乱してしまい、複雑なUIと捉えてしまいます。

そのほかにもアニメーションを使うと効果的な場面をご紹介します。

更新の動作
   

 

こちらは「画面を下にスワイプして放す」という動作により更新を行った場合に現れるアニメーションです。画面のどこからでもスワイプにより更新する事ができるこの方法は、ナビゲーションバーまで指を伸ばして更新ボタンを押し、画面に更新中と表示されるという流れがないため、ユーザにとってはボタンよりも楽な操作となります。しかし、このスワイプ更新にはアニメーションが必要不可欠です。もし、この操作にアニメーションが無かった場合、気づきとなる要素がないため、ユーザーは“どこまで下げればいいのか?” “更新がされているのか?”と悩んでしまいます。かといってどの辺りまで下げるべきなのかをチュートリアルで説明する事は、読まれるかわからない上にユーザーの使用を一時的に止めてしまうため、最良の手段とはいえません。このスワイプ更新のように、行って欲しい動作のイメージに沿ったアニメーションを加える事で、ユーザーは煩わしいチュートリアルを読む必要がなくなります。

削除と詰め
  ×    ○

 

リストなどで追加・削除を行った際にアニメーションが無かった場合、要素が消えたことや消えた空間が詰められたということがあまりにも突然で、ユーザーが認識をする事が難しく混乱します。また、削除と詰めなどの複数の動作が同時に起きる事も混乱の原因になります。この場合はアニメーションにより「削除」→「スペースを詰める」と言う順序をわかりやすく表示する事で混乱を避けることができます。このようにアニメーションにはアクションの順序を伝える手段として有効です。


UIにアニメーションを取り入れる事は非常に重要です。「言われてみれば、ここにアニメーション使われているよね」と、思われるぐらい自然に組み込むことが理想です。また、ポジティブな体験を伝え、ユーザーを飽きさせないようにする・惹きつけるアニメーションももちろんあります!(こちらもまた別の機会にご紹介してみたいと思います)では。

Pocket

ユーザーフレンドリー

こんにちは!デザイン業務に関わっておりますコンです。

不安定なお天気が続きますね。急に大雨が降ったりするので困ってしまいます。
さっそく新品の靴が濡れてしまいました…みなさんも気をつけて下さいね。
もし靴の買い替えをご検討中の方は梅雨が明けてからの方が良いかもしれませんよ!

さて、今回のテーマは「ユーザーフレンドリー」です。
ユーザーフレンドリーとはどんなものなのか、スマホ向けサービスをデザインする視点で考えていきたいと思います。


ユーザーフレンドリーとは?

ユーザーフレンドリーとは、その名の通り「使う人にとって親切なこと」と言う意味です。
ユーザーの視点に立ったサービス設計や、使いやすい状態を言います。UIデザインをする上でとても大切なことです。

「何も知らない人が初めてこのサービスを見た時、使い方がわかるかな?」と考えてみて下さい。
ユーザーは、何か目的があってサービスを利用しようと思っています。その目的をストレスなく達成してもらう為に、ユーザーフレンドリーを意識してUIデザインを行って下さい。
そうすることで、問題点のある現状よりUIを向上させることが出来るはずです。


ユーザーフレンドリーのポイント

ユーザーフレンドリーで特に意識すべき代表的なポイントをご紹介したいと思います。


①目線の流れを意識する

基礎的なことではありますが「目線の流れ」を考えましょう。
簡単に言えば、横書きの文字は左から右へ、行が変われば上から下へ読むのが自然なことですので、そう行った目の動線を意識すると言うことです。

目線があっちこっちに行くより、一定のルールでテンポよく見せてあげた方が見やすいですよね。

②優先度を明確にする

ユーザーにとって優先度が高い物から順番に構成しましょう。
①とも関係しますが、目線が左から右、上から下へ動く特徴を活かし、優先度の高い物は上部または左上に置くと効果的です。
最も目立ち多くの人に見てもらえる場所ですので、それだけユーザーがすぐ気付くことが出来ます。

更にその中でも優先度が最も低い物やあまり目立たせたくない物、最も重要な物で表現を変えたりするとよりわかりやすくなります。

上記を意識してボタンを配置する場合のイメージも作ってみました。下の図を見てみて下さい。

まず、あまり目立って欲しくない物とは「キャンセル」「戻る」など離脱する要素で、イメージの左の図のように色の面積を減らして目立たないようにしています。
開発側からするとネガティブな要素なので、出来るだけ押してほしくないですよね…。
優先度をかなり下げてテキストだけにすることもありますが、これは開発側の目線なのでユーザーフレンドリーではなくなってしまいます。
その場合はテキストの色を変えてあげたりするとアクションを起こせる気づきになるので、ユーザーフレンドリーになります。

次に、特に重要な物とは「決済の確定」「消去」など取り消せない要素で、イメージの右の図のように注意を促す赤色を使用して目立つようにしています。
こうすることで目線を優先度の高い物へ誘導してあげることが出来ます。


③押せることがすぐわかるようにする

ボタンやリンクパネルなどタップすることでアクションが起きる要素が、押せるものだとすぐわかるようにしましょう。

下記の図を見てみて下さい。

左の図のより、右の図の方がボタンだと認識しやすく押せることが分かりやすいですよね。
文字を囲っただけですが、ちょっとしたことでグッとわかりやすさが変わってきます。

優先度が低いアクションに対しては、テキストの下に下線を引いたり、矢印アイコンを付けるだけでも効果があります。

 

ここで注意したいのが、押せる場所と押せない場所の違いが明確になるようにすることです。
押せない場所が押せるように見えないように表現を変えましょう。


④シンプルに

機能や画面の要素は出来るだけシンプルにしましょう。
選択肢が多ければその分迷いが発生しますので、ユーザーが目的を達成するまでに時間を掛けさせてしまいます。

極端な話ですが、選択肢が2つしかなければ、どちらか1つ選べばいいだけなのでわかりやすいですよね。
機能を減らすのが難しい時など、どうしても画面内が複雑になってしまう場合は、最も優先度が高い物が何なのかわかるように構成しましょう。

例えば下記の図ですが、機能が沢山ある中でもシンプルに見せることが出来ます。

左の図は、選択肢が多い上に見た目も同じなので、どこを選択すればいいか一目ではわかりづらいですよね。
上から下まで読んでから選択する…と言う動きになるので、時間のロスだったりユーザーのストレスに繋がります。
右の図だと、「はい」「いいえ」の選択肢にまず目がいきますよね。「青いボタンのどちらかを押せばいいんだな」とユーザーが直感的に気付けるかと思います。
このように、いかにシンプルに見せるか注意することで、わかりやすさに大きな違いが出てきます。


おわりに

いかがでしたでしょうか?
ユーザーフレンドリーの考え方自体は、そんなに難しい事ではないですよね。
そもそも機能が複雑だったり、サービス開発が進んでいく中で仕様が変化したりすると「どうすればいいかな?」と悩むところではありますが…

悩んだ時こそ、ユーザーにとって何がフレンドリーなのか初心に返ることも大事なのではないでしょうか!

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

Pocket

簡単!パターン素材の作り方-基礎編-

簡単にドット背景、星柄背景を使えたら…!と思った事はないでしょうか?
今回はパターン素材の作り方を紹介したいと思います。
内容のレベルとしては基礎編ということで初めてパターン素材を作る方やどんなものだったけなと復習に適したものになっております。
—————————————————————-
★作成環境:IllustratorCC(作成に置いてCSシリーズも対応)
★動作確認:Windows7
★所要時間:10分(慣れると5分)
—————————————————————-
*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*

▼パターン素材とは

・自分で作ったパターン素材をスウォッチに登録することで、色を選択する感覚でいつもで使えるようになります。
・作ったパターン素材は縦横敷き詰める形で配置されます。


そのため、どんな形においても敷き詰めた際に繋がる上下・左右は絵柄、スペース等の違和感が無いように計算して作成をする必要があります。
パターンを作る際に最も重要な1つとなります!

それでは上記を踏まえ、まずは簡単なパターン素材を一緒に作って行きましょう!

▼『星柄繰り返しパターン』メイキング

上下・左右の絵柄、スペースのつながりに注意しながら作ってみましょう!

※ここで紹介しております内容は、一作例となります。
サイズ、比率等は説明のしやすい様に書いております。

【1】ツールの長方形ツールで正方形を描く。
【縦200px横200px・色#afd8f9】

【2】柄に使用する星を用意します。今回は縦横16px×16pxの星にします。

【3】星と背景を選択し、整列ツールを使って左上にピッタリ配置します。

【4】星を右側に50pxずつ動かす準備をします。
【Ctrl+K】で環境設定を開きキー入力を50pxに設定しOKを押します。

【5】星を選択し【Alt+→(右)】で星をコピーします。

【6】【Ctrl+K】で環境設定を開きキー入力を25pxに設定しOKを押します。
星4個を選択し【Alt+↓(下)、Alt放して→(右)】
【Alt+↓(下)、Alt放して→(左)】を交互に行い星を増やします。

【7】出来上がった画像を全選択して【Ctrl+G】でグループ化します。
その後、スウォッチが画面にない場合は上部のウィンドウからスウォッチ
を選択してください。

【8】出来上がったパターンを選択しスウォッチにドラッグします。

【9】スウォッチにパターンが追加され、これでパターン作成完了です!

【10】ハート型の図形にパターンを使ってみました。

▼最後に

いかがでしたでしょうか?
基本的な繰り返しパターンの作成を紹介させて頂きました。
柄が星ではなく、ストライプやドットの場合でも同じことが言えます。
また、規則性の無い柄になると少し難しい話になるかもしれませんので
それはまた次の機会にて!以上スガがお送りいたしました。

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

Pocket

プロトタイピングに挑戦する


今回は、
Webサービスのプロトタイピング(ゲーム)に挑戦します。
ツールは、以前にプロトタイピングツールの紹介記事のなかで紹介した
『 Adobe Animate CC 』(旧『Adobe Flash Professional』)を使って、
UXのエッセンスを加えていきます。

現在、FlashとFlash制作ツールは過去のものとなっておりますが、
「ActionScript」から「JavaScript」の制御に変更になる点と、
記述方法の独自の縛りを認識して進めれば、
同じオペレーションスキルで『 Adobe Animate CC 』による、
「HTML5 Canvas 」のアウトプットが作れるメリットがあります。


■まずは設計

私のスキルですが、

・Flashツールのオペレーション
・極少々のJavaScript

程度です。

そんな理由もあり、今回は課金等発生するサービスではなく、
「HTML5 Canvas 」を活かしやすい、
簡単UIワンボタンゲームを作りたいと思います。

まずは遷移図がこちら↓

なんと要素の少ないことでしょう;
しかしながら、
これらの内容全てを盛り込める時間もありませんので、
形に出来るように取り組んでまいります。

遷移図を見る限り、単純な「if文分岐」で作れそうです。

「ランキング」機能については、実現は難しそうですが、
今回の目的は、
短い期間でアイデアを展開出来る形に落とし込む「プロトタイピング」ですので、
やりたいことのイメージ/ビジョンが、
第三者に伝えられる状態になっていれば問題ありません。
最低限伝えたい雰囲気だけは再現していこうと思います。

時間が限られていますので急いで進めていきます!


■画面イメージを起こす

早速『 Adobe Animate CC 』に組み込む画像を作ります。

遷移図を参考に、各ページを『illustrator』で作ります。

アートボードを画面単位で運用ファイル名をつけて設定してしまえば
ワンアクションで全てのページが書き出し出来て便利です。
したがって、必要な画面のブラッシュアップは適宜おこなえますね。
本当に便利です。

ゲームをプレイするターゲット(今回は1970~80年代の古き良き遊び世代)に好感を持ってもらうため
液晶/LSIゲームの表現を取り入れてます。
ターゲットの懐古UX度上げていきます。

※今回は単純な内容なのですが、
「ユーザー・エクスペリエンス(ユーザー体験)」を重視しています。


■いざ組込み素材の書き出し!

必要な画像が揃ったので書き出しします。

⇒ファイル/書き出し/スクリーン用に書き出し…
です。

今回の作業は「横幅375px」で『illustrator』上で作業をしてますので、
ターゲット端末(iPhone6 サイズ 横幅750px)で使用した場合も必要な解像度が得られるように、
「x1」(倍)から「x2」(倍)に切り替えて書き出しします。
※「iPhone6 Plus サイズ 横幅1242px」がターゲットの場合は横幅414pxで作り「x3」(倍)

それではポチッと書き出し…

…細かい部品も含めてワンアクションで書き出し完了でリネームも必要ありません。
便利です。

さぁ!時間がありません!

『 Adobe Animate CC 』で簡単プロトタイプを製作するために組み込みしましょう!


■『 Adobe Animate CC 』での組込み

※オペレーションは割愛させていただけます。

組込み方はFlash時代と変わりありませんので、
ライブラリに格納した画像を「ムービークリップ」にそれぞれ設定しましょう。

ステージサイズはWeb表示時に一画面に収めたいので375×554(くらい)。

スクリプトのレイヤーを作ってJavaScriptはまとめて記述しましょう。
基本遷移アクションのスクリプトは項目を選ぶと自動である程度書き込まれます。
楽々ですね。

あとはスライドショーをつくる感覚でタイムラインを制御して実装を続けると…

こちらの状態が出来ました。



※あくまで製品雰囲気を伝えるプロトタイプなので、
挙動や当たり判定の完成度には期待しなくて問題ないです。

十分、提案したい内容は伝わるのではないでしょうか。


■UXを意識した調整

今回の目的に「UX」があります。
画面イメージなど意匠でもUXを意識して制作していますが、
最後に、楽しい体験を演出する表現を追加してみます↓



まだまだ足りませんが、
先ほどの状態より背景の草が動いていて、ポジティブな感情になりましたでしょうか。
単調な内容でも、
目的をより良く導く体験要素を組み込むだけで、
感じる体験の内容が変わってくるのではないでしょうか。

今回のプロトタイプでは再現出来ていない「スコア」、
「スコアの違いを生む要素」、共同体験が可能になる「ランキング機能」などは、
より良い体験(UX)に繋がる要素です。

是非、アイデアを形(プロトタイプ)にして、
より具体的な提案をしていきましょう。

次回も、サービスUX設計の話題をしたいと思います。
以上、デザインに関わっているデジマースのネモトでした。

/////////// 関連記事はこちら↓ ///////////


プロトタイピングの活用


[必然的な利用シーン]環境/需要との接触


UX(ユーザー・エクスペリエンス)を解釈してみた


サービスVSユーザー!UIリテラシー格差を考える


あぁ…Flashツールに望みはあるか?


8bitに学ぶUIデザイン


サービス運用中の注意点


データとセグメンテーション


サービス立ち上げとデザイン

<a

Pocket

趣味の写真加工にぜひ!Photoshopで行う画像の切り抜き+合成 【切り抜き編】

こんにちは。今回ご紹介するテーマは
「趣味の写真加工にぜひ!Photoshopで行う画像の切り抜き+合成【切り抜き編】」です。

趣味でPhotoshopを使う、あるいは使ってみたいという方は沢山いらっしゃるかと思います。PhotoShopを使ってまず何をしてみたいか…最初に思い浮かぶことはおそらく切り抜きや合成ではないでしょうか?色調補正では?とも思ったのですが、最近は皆さんスマートフォンで補正をおこないますよね…!?
と、言う事で、私の今回と次回の更新で切り抜きと合成(フォトコラージュ)についてご紹介したいと思います。今回ご紹介する切り抜き方法は一見複雑に見えますが、特別な知識・技術は必要ありません。基本、ただなぞるだけの作業となります。

前置きはいいのですぐに切り抜きたい方は コチラ!>

切り抜きを行う前に…切り抜きについて

切り抜きは、フォトコラージュだけではなく、補正のためにも行われます(厳密にはパスやマスク、選択範囲の作成が目的)。
また、言わずもがなですが切り抜きの精度は制作物の仕上がりに大きく影響します。切り抜きが甘いと安っぽかったり…怪しかったり…と、印象が悪くなってしまいます。そしてなにより合成時の違和感が大きくなります…。(ネタ画像などは雑な方が味が出る場合がありますが…)自然な合成を行いたいのなら正確な切り抜きは必須です。

画像の切り抜き方法の種類

画像の切り抜きが初めての方は「どうやってやっているのだろうか?」と思うかもしれません。実は切り抜き方法は、簡単なものから、少しコツのいるものまで沢山あります。
どの切り抜き方法を行うのかは、画像や使用する場所によって判断するのですが、今回はペンツールなどの使い方を知らない方でも切り抜く事のできる方法を一つご紹介いたします。

今回行う切り抜き方法について

今回の切り抜き方法は「選択範囲とマスク」機能を使用した方法です。
この切り抜き方法は手動+自動検出により選択範囲を指定し、マスク(後ほど補足します)をかけて切り抜くという方法です。この方法は主に髪の毛やふわふわした犬・猫などの輪郭の複雑なものの切り抜きに適しています。
切り抜きたい物と背景の境界があいまいな画像には適していません(切り抜けないわけではありません)。また、境界がはっきりしている画像に関してはパスで切り抜く方法がオススメです。

切り抜き手順

では早速、作業手順をご紹介していきます。

PhotoShop上部メニューバーから「ファイル」→「開く」で切り抜きたい画像を選択し「開く」をクリック

画像が開きました。今回はこちらの猫の写真を切り抜きます。

「選択範囲」→「選択範囲とマスク」をクリック

選択画面に切り替わるので、表示モードをオーバレイに切り替えます

「クイック選択ツール」をクリックします。ツール選択後、切り抜きたいもの(残したい物)をドラッグします。すると自動で対象の輪郭が選択されます。

選択範囲がはみ出してしまった場合は、はみ出した部分をAltキーを押しながらドラッグします。(細部は次の工程で調整するので多少荒くても構いません)

クイック選択ツールによる大まかな選択が完了しました。

「境界線調整ブラシツール」を選択し、切り抜き対象の境界をドラッグでなぞります。余計に選択した場合はAltキーを押しながらドラッグして調整します。

境界の選択が完了したら、「出力設定」をクリック→出力先を「レイヤーマスク」に変更→「OK」をクリック


切り抜きが完了しました。

「ファイル」→「保存」でタイトル(今回は“ねこ”としています)を入力→「ファイルの種類をPhotoshop(PSD)」に設定→「保存」をクリック

以上で切り抜き作業の完了です。

おまけ:スマートフォン用の壁紙画像を作ろう!

PhotoShopで先ほど制作した切り抜き画像を開きます。

レイヤーパネルで「塗りつぶしまたは調整レイヤーを新規作成」アイコンをクリック→「ベタ塗り」を選択→カラーピッカーでお好きな色を選んで「OK」をクリック

追加された「ベタ塗りレイヤー」をレイヤー0(ねこ画像)の下にドラッグ&ドロップ で移動

切り抜き画像の背景に色がつきました。

切り抜きツールを選択。
バウンディングボックスをドラッグし、スマートフォンで使用したい範囲を選択→「Enter」をクリック。※画像の表示範囲設定は端末の設定画面で行ってください。

補足:サイズを指定したい場合は上部にあるオプションバーより「幅×高さ×解像度」を選択→幅と高さに数値を入力します。

その後「ファイル」→「別名で保存」→ファイルの種類を「JPEG」に設定→「保存」→「JPEGオプション」で画質を8に設定(好みの画質で構いません)→「OK」をクリック

完成です!
あとはコチラの画像をお手持ちのスマートフォンに送信し設定をするだけです!

いかがでしたか?PhotoShopでは輪郭の複雑な写真でも、ただなぞるだけで切り抜く事ができます!次回はこちらの切り抜き画像を使用してネタ要素の強い合成写真の作り方を説明していきたいと思います。

Pocket

初心者向け!エンドロールの作り方①[Illustrator編]

こんにちは!デザイン業務に関わっておりますコンです。

さて、今回のテーマは「初心者向け!エンドロールの作り方①」です。
エンドロールの中でも、結婚式の披露宴などで流すエンドロールムービーの作り方をご紹介します!
「結婚式の費用を節約したいからエンドロールは手作りしたい!」「友人から頼まれちゃった」「でも作り方がわからない…」と言う方はぜひ参考にしてみて下さい!

今回は、まずどうやって文字を組めばいいの?と言う方向けにIllustrator(イラストレーター)を使用した静的なエンドロールの作り方をお話したいと思います。
そして次回はAfter Effects(アフターエフェクト)を使用した動的なエンドロールの作り方をご紹介する予定です。


使用するソフト

今回は1種類のソフトを使用して動画を作ります。

■Illustrator(イラストレーター)

バージョンは「CC 2017」を使用しています。


作成の全体の流れ

作成の全体の流れは大きく分けて3つです。

①作るべき動画のサイズと素材を確認。
②Illustratorでテキスト作成・文章の構成確認。
③After Effectsでテキストが上にスクロールする動きを付けます。

After Effectsでテキスト作成をすることも出来ますが、名前の抜けや誤変換などミスがないかのチェックがしづらい為、まずはIllustratorでテキスト作成を行い文章の構成まで確認することをオススメします。
今回は①と②についてお話していきたいと思います。


エンドロールを作ろう!

1.作るべき動画のサイズを確認
作るべき動画のサイズを確認することはとても大切なことです。式場のプロジェクターのアスペクト比が4:3なのか、16:9なのかなど、動画を再生する設備によって作るべき動画のサイズは変わってくるからです。
いざ本番で再生しようとした時に上手く動画が映らなかった…なんて事が起きないように、利用する式場などにしっかり確認して下さい。

2.動画に使用するゲストの名前リストやメッセージリストを用意しましょう
エンドロールには名前が不可欠です。また、新郎新婦からゲスト1人1人へお礼のメッセージを添える場合もあります。ゲストの人数と名前をしっかり確認し、メッセージは誰に宛てているのかリストを作っておきましょう。
後ほどIllustratorで作業する中で、「新郎ゲスト」→「新婦ゲスト」の順番で並び替えたり、更に細かく「会社関係」→「友人」→「親族」→「家族」に並び替えますので、リストの段階でその並びになっていると後が楽ですよ!

3.Illustratorで新規ドキュメントを作成
Illustratorを立ち上げ、「ファイル」→「新規」を選択。今回は640×360(16:9)の画面サイズを想定して作成していきます。
※必要な動画サイズに関しては、[1]で説明したように利用する式場に確認してみて下さいね。

4.背景の作成
レイヤー1に「長方形ツール」で黒い縦長の長方形を作ります。これがエンドロールの背景になります。レイヤー名を“背景”にしておくとわかりやすいです。
高さは仮で5000としていますが、結婚式に出席する人数に合わせて自由に変えて下さい。

この段階では「整列」の設定は「選択範囲に整列」にしておいてください。

5.テキストボックスの作成
レイヤー2を作成します。このレイヤーに出席する人達の名前やメッセージを記入していきますので、レイヤー名は“テキスト”などとしておいて下さい。
「長方形ツール」で3種類の長方形を作ります。それぞれ「名前」「敬称」「メッセージ」のテキスト領域となります。
長方形が作れたらグループ化してしまいましょう。3つ選択した状態で「オブジェクト」→「グループ」でグループ化することが出来ます。

文字を組む際はルールを作ると見やすくなります。右揃えなのか中央揃えなのか、文字は1行に何文字まで入るのか決めることで、読みやすく統一感のあるエンドロールにすることが出来ます。
今回は「名前」は6文字まで対応で、「メッセージ」は4行かつ1行に14文字収めると言うルールで作成してみました。また、「敬称」は“○○ちゃん”にも対応できるように3文字分の領域を確保しています。
名前やメッセージ領域をもっと広く取りたいと言う場合は、長方形のサイズを大きくするなどして調整してみて下さい。
文字領域はこのくらいがいいけど名前が6文字以上の方がいる…と言う場合は、6文字の領域の中で文字を縮めて記載したり、2行で記載しても良いかと思います。

6.テキストの作成
「文字ツール」を選択し、長方形の左端にカーソルを合わせて左クリックします。これで長方形の中にテキストを配置することが出来ます。
上手くいかない時は、カーソルの形が「文字ツール」から「エリア内文字ツール」に変化した所でクリックして下さい。

名前やメッセージを入力すると下記の図のようになります。使用しているフォントや文字設定の情報も載せていますので、参考にしてみて下さい。
メッセージのフォントサイズは名前より小さくするとメリハリが付き読みやすいです。名前より70%~80%ほど縮小して下さい。

7.テキストと背景の整列
作成したテキストを先ほどの黒い長方形の背景の上に重ねると、下記の図のようになります。

図のようにテキストを背景の真ん中に配置したい場合は、背景とテキストを選択した状態で「整列」→「水平方向中央に整列」とします。

8.テキストをコピペして書き換える
[7]のテキストをコピペして、名前やメッセージを書き換えて下さい。
親族や友人グループなどまとめてメッセージを書きたい場合は、[5]の「名前」と「敬称」の長方形の高さを変えます。
例として親戚の叔母さん家族の設定で組んでみました。夫、妻、お子さんの“目上の方”順で、兄弟がいる場合は年齢順です。お子さんの敬称は“様”のままでも良いですが、小学生など若い方でしたら“○○ちゃん(くん)”など砕けた言い方でも良いかと思います。

9.テキストの並びを整える
名前とメッセージの入力が完了したら、「新郎ゲスト」→「新婦ゲスト」の順番で並び替えます。更に細かい順番は「会社関係」→「友人」→「親族」→「家族」の優先度が一般的です。
下記の図のようにグループごとに間隔を空けて配置していきます。文字が動くことを考慮して、読みやすいように間隔は広めに取りましょう。
今回の場合はテキストボックス同士の間隔が107px空くように配置しました。

空けたい間隔のサイズの正方形を作ると作業がしやすいです。ここで作った正方形は“作業”レイヤーを作って置いておきましょう。
作業が終わったら、レイヤーウィンドウの「目のマーク」をクリックして非表示にして下さい。

最後に、出来上がったテキストを全選択します。レイヤーウィンドウの右端にある“○”をクリックすると一括で選択できます。

選択出来たら「オブジェクト」→「グループ」でグループ化します。

10.アートボードを整える
[9]まで完了したら背景(黒い長方形)の高さを確認します。
名前やメッセージの量によっては、最初に設定した高さと異なっている場合があるかと思います。

確認できたらその数字をアートボードの高さに反映させます。※今回は初期設定のままの5000pxで進めます。
「アートボード」→「高さ」で数値を変更します。

11.アートボードに整える
それが終わったら「整列」の設定を「アートボードに整列」にします。

背景を選択して「整列」→「水平方向中央に整列」「垂直方向中央に整列」とします。
テキストも同じく、選択して「整列」→「水平方向中央に整列」「垂直方向中央に整列」とします。
※上記の後、テキストを背景に対して左右どちらかに寄せたい場合は「選択ツール」で手動で移動させてください。

これで、アートボードに全ての要素が配置されたかと思います。
下記の図はIllustratorの画面全体を見た時のイメージです。(12.5%の画面表示です。)

最後に名前やメッセージに間違いがないか確認して、問題なければ静的なエンドロール作成は終わりです!
おつかれさまでした!


おわりに

いかがでしたでしょうか?
黒い背景にテキストが整然と並んでいると動いていなくてもエンドロールっぽさが出てきますね。

そして次回は、いよいよAfter Effects編です!
今回作成したIllustratorのデータを使ってAfter Effectsで動きを付けていきますので、ぜひそちらもご覧ください!

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

Pocket

手描きイラスト「ふわふわパステル」~byフォトデコレ~

こんにちはもしくはこんばんは!
皆さまゴールデンウィークはどうでしたか?
家族や友達との遠出の旅行や日帰り旅行、またはのんびりお家で過ごされた方もいらっしゃると思います。
写真も普段より沢山撮られた方なんかもいらっしゃるのではないでしょうか♪

さっそくですが今回はそんな思い出の写真をふんわり変身させられるスタンプを使用例と共に紹介したいと思います!
※株式会社デジマースが提供しております写真系ツールフォトデコレの「ふんわりパステル」スタンプになります。

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

▼「ふんわりパステル」

「ふんわりパステル」は手描きですので、写真の被写体の邪魔をせず自然な感じに装飾が出来ます。
メインの写真を主役にしたまま、ふんわり仕上がります。
スタンプ自体がパステル調のため、少し濃いめの部分に装飾するのが良いですね。

▼フォトデコレで配信「ふんわりパステル」

スタンプやコロコロ、フレーム等、ご用意。(計49点)
実際にこれらのスタンプを使用した写真はこちら↓

▼メッセージカードにも!

撮った写真だけでなく、ちょっとしたメッセージカードの装飾にも合います!
―――――洒落たメッセージを送ってみませんか?

手順
①メッセージを書いて写真を撮ります。
※撮るときは余白を空けるのと、なるべく明るくすると装飾がしやすいです。
②『フォトデコレ』内で画像を選択し、まずはフィルターでより自然な
感じに加工をします。
③思うように装飾!
※あくまでも文字がメインなので文字の邪魔にならない様装飾するのがコツです。


手順
①『フォトデコレ』内に白く撮った画像を用意します。
※撮るときは明るく白くなる様にすると良いです。お好みでフィルター加工を。
②テキスト入力と装飾をします。

▼最後に

パステルカラーなのでほんわか装飾が出来ます!
装飾が苦手な人でもカンタンに出来るので是非試してくださいね!

▼『フォトデコレ』は以下で使用できます。
—————————————————————————————————————————–

—————————————————————————————————————————–

▼過去紹介分はこちら

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

Pocket

プロトタイピングの活用


スマホ市場も成熟期に入り、コンテンツ配信では競合も多く、
サービスの運営に不安を感じることが多くなっていると感じます。
そんな状況はサービス設計についても従来の設計から変革が必要となってきており、
コンセプトやターゲティング、ビジネスモデル構築に十分な時間をかけて設計を進めるリスクを避ける、迅速な発想の商品化が求められてきています。

今回は「起案」と同時に「プロトタイピング」の工程を進めてしまうことで、
より多くのサービスをUXを意識出来るレベルまで具現化して並行提案(開発)出来ないか妄想してみました。


開発コストがリスクだったプロトタイプ

商品開発中に全容認識が容易になるプロトタイプの製作は有意義な作業であることは明確でしたが、
プロトタイプ自体の開発期間/コストが問題でそれを行わず、
本開発を進めてしまう現実がありました。
そんな中、
モバイルwebサービス開発支援を目的とした「プロトタイピングツール」の台頭により状況は大きく変わってきております。
詳しくない方でも名前を良く聞くのは、
「Prott」「Sketch」「Adobe Experience Design(2017.4.25時点で無料ベータ版)」でしょうか。

個人的には以前紹介した「Adobe Animate」でもアプリ寄りなプロトタイピングも出来ると考えております。

プロトタイピングツールによって、
従来専門的なスキルと多くのリソースが必要だったサービス設計のやり方にも変化が起きました。

HTMLやプログラムの知識が無くても全体像の構成サンプルをマウス操作で作ることが出来、
実機確認出来る状態を他者へ共有シェア、遷移図の資料等の自動書き出しまで行えるツールもあります。
つまり、
リスクだったプロトタイプ制作のデメリットが解消されたのですから取り組まない手はありません。


プロトタイピングのメリット

従来からサービスの有効性/ユーザビリティーの検証方法として、
「ユーザビリティー調査(テスト)」が提唱されておりますが、
アジャイル的迅速なサービス開発が求められる現在ではその非効率特性が顕著に表れてきてしまいました。
サービス設計者はスケジュールを考慮すると、
まず「削減」を考えるフェイズになってしまっているのが実情です。

非効率化を解消し、
プロジェクトメンバー間での効率的な共有をする目的で開発されたプロトタイピングツールがあれば、
まずは自身もしくは、プロジェクトメンバー全体での認識として、
満足度の高いイメージ/ビジョンが反映されやすい製品プロトタイプが作れる環境にはなってきているのです。

以前は、長い開発期間を経過するなかで薄れてしまったイメージ/ビジョンがあり、
ユーザビリティー調査で「答え合わせ」するまで良し悪しの判断が出来なかったことが、
ツールの導入により素早くプロトタイプが作成出来、
温度差/感覚差が生まれにくい環境が整ったことが最大の導入メリットと言えます。


従来の開発フローで進めるリスク

効率的なツールを競合他社が使うなか、
従来の手法で確実なサービス設計を進めるリスクを考えてみます。

どんな「ひらめき」や「アイデア」が市場で成功するかの確証は残念ながら得られません。
そんな中進めるサービス設計について、
従来のマス需要に向けていれば十分な成功が得られた時代は終わってしまいました。

生活環境が多用化した現在では、同じ環境/価値観自体が少なくなり、そのリサーチしやすい需要も少なくなってしまいました。
先が暗いマーケティング事情なのか定かではありませんが、
「大衆向けヒット商品」が出にくい時代になったことは判断できます。

そんな中で「確実なサービス設計」で進めることはリスクが大きく、
プロジェクトラインを多く抱えられない企業では大きな機会損失に繋がるので、
多くのアイデアを次々と短い期間で具現化し、
そしてビジネスモデル検証するフローが求められると考えます。
そこで可能性を活かす理想論が、「起案」と同時に「プロトタイプ」まで進めてしまうプロセスです。


「ビックプロジェクト」ではなく「ひらめき」の可能性

多用化した生活環境、多様化した需要は裏を返せば、
起案者自身の個人的な需要でさえも、必要とするニッチな需要層である可能性が考えられます。

都合が良すぎる話ですが、
例えば、起案者自身がプロトタイピングツールを使いUX設計を提案出来れば、
残ったリソースでも多くのプロジェクトラインを同時に立ち上げることも可能なのではないでしょうか。

「数打てば当たる」ではなく、
「数打てなければ可能性が埋もれる」でしょうか。

サービスの提供期間についても短く変化してきている感もありなおさら…ではあります。

今後登場する、プロトタイピングツール「Adobe Experience Design」製品版については、
Adobe Creative Cloudのサブスクリプション契約下であればすぐにでも導入出来ます(Mac/Windows10環境)

まずは無料体験期間のあるツールを使用してみてはいかがでしょうか。

次回も、サービスUX設計の話題をしたいと思います。
以上、サービスデザインに関わっているデジマースのネモトでした。

/////////// 関連記事はこちら↓ ///////////


[必然的な利用シーン]環境/需要との接触


UX(ユーザー・エクスペリエンス)を解釈してみた


サービスVSユーザー!UIリテラシー格差を考える


あぁ…Flashツールに望みはあるか?


8bitに学ぶUIデザイン


サービス運用中の注意点


データとセグメンテーション


サービス立ち上げとデザイン

Pocket

簡単! ゆるゆるイラストチュートリアル②[PhotoShop着色編]


お久しぶりです!第34回ブログ更新担当のはらです!
今回は前回の記事「簡単! ゆるゆるイラストチュートリアル①[Illustrator線画編]」の後編「簡単! ゆるゆるイラストチュートリアル②[PhotoShop着色編]」をご紹介したいと思います。
本日も前回同様この方にお越しいただきました。イラスト大好き「イラストちゃん」さんです!

お…お久しぶりです。今日はテンション高めですね。何か良い事でもあったのですか?

がんばってくださいね。

と、言う事でPhotoShopでの着色方法の紹介をお願いします。


1. 前回作成した線画ドキュメントをPhotoShopで開きます
PhotoShop上部メニューバーより「ファイル」→「開く」を選択。
[Illusutlator編]で制作したAIデータを選択し「開く」をクリック。

2. 「PDFの読み込み」ダイアログボックスで下記情報を入力し「OK」をクリック(サイズは用途に合わせて変更してください)

画像が開きました

3. レイヤーパネル下部の「塗りつぶしまたは調整レイヤーを新規作成」アイコン→「ベタ塗り」を選択→色をffffff(白)に変更

4. 制作した「べた塗り 1」レイヤーをレイヤー1の下に移動

5. レイヤーパネルでべた塗り1レイヤーを選択した状態で「新規レイヤーを作成」アイコンをクリックしてレイヤー2を作成→レイヤー2を選択した状態でレイヤーの描画モードを「乗算」に変更

6. ツールパネルから「ブラシ」を選択。カラーパネルの描画色を設定をダブルクリック→カラーピッカーに数値(b4eaff)を入力し「OK」をクリック(色は何色でも構いません)

7. 「ウィンドウ」→「ブラシ」でブラシパネルを表示「ブラシパネル」内で「楕円(ソフト)11」を選択し数値を入力

8. Illustrator上部コントロールパネル内の「不透明度」を40%に変更

9. レイヤーパネルの「レイヤー2」を選択した状態で色を塗ります。(今回は行いませんがパーツごとにレイヤーを分けると修正が楽になります)

10. イラスト全体の塗りが終わったら、次は線の色を変更していきます。レイヤー1(線画レイヤー)をダブルクリック

11. レイヤースタイルダイアログで「カラーオーバーレイ」にチェック→描画モードを「スクリーン」に変更。その後、好きな色を選択(今回は#7d7a7fに変更)「OK」をクリック。

12. 完成

ポスター怪しいですね…

思い返してみるとWEBや紙媒体などには大抵イラストや写真が入っていますね。これだけ使われているということは、今後もイラストが必要な機会は沢山ありそうです…。そんな時に今回知ったイラスト制作方法を“読んでもらえる資料”や“引きの強い広告”制作に役立てていきたいと思います!

こちらこそありがとうございました。早速会社のブログ制作に使ってみますね!
ということで皆さんも機会があれば描いて見てくださいね!そでれはまた次回の更新でお会いしましょう。


今回ご紹介した作画方法で制作したイラスト(細かい設定は少し変えていますが…)が、求人情報サイト「ジョイジョブ」twitterアカウントで使用されています。
興味のある方は「ジョイジョブ」twitterアカウントhttps://twitter.com/joyjob_jpを覗いてみてください。


 

Pocket

たのしい文字組み 字間を調整してみよう

こんにちは。デザイン業務に関わっております、コンです。

みなさんお花見はしましたか?会社の近くの桜はもうほとんど葉桜になってしまいました。
桜が満開になってくると、大抵大雨が降ってすぐ散ってしまうので、毎年気が気ではありません…

さて、今回のテーマは「文字組み」についてです!
前回は文字組みの「字間と行間」について基礎的な部分のお話をしましたが、そのレベルアップ版で「字間」についてもう少し掘り下げていきたいと思います。

これから新入社員やデザイナーになる方に向けて、字間の調整方法や、漢字や記号などそれぞれの特徴に合わせた字間の空け方を書いていきます。
文字組みに気を配ることで、読んでもらう人にスムーズに内容を理解してもらうことが出来ます。デザイン作りはもちろん、日頃のプレゼン資料作りにも役立ちますので是非ご一読ください!


“字間を調整する”とは?

字間とは、文字通り「字と字の間」を指す言葉です。
字間の調整方法には、「字送り(トラッキング)」「カーニング」「文字ツメ」があります。


トラッキング(字送り)

テキスト全体の文字間隔を一定に整えるのに適しています。テキスト全体の中から一部を選択して任意の部分だけ間隔を調整する、と言う使い方も出来ます。
トラッキングの設定の値をプラスにすると間隔が広がり、マイナスにすると間隔が縮まります。

カーニング

2文字(文字とそれに隣接する文字)の間隔を調整するのに適しています。調整方法として、自分で数値を選択・入力して整えることが出来る他、Adobeソフトなどでは自動で文字組みを調整してくれる機能「和文等幅」「オプティカル」「メトクリス」があります。
カーニングの設定の値をプラスにすると間隔が広がり、マイナスにすると間隔が縮まります。

文字ツメ

そのままですが、文字を詰めるのに適しています。0%から100%の値を選択して文字と文字の間を詰めます。設定の値が100%に近づくと、組み合わせによっては隣り合う文字がくっついてしまいますので注意が必要です。
文字詰めの設定の値をプラスにすると間隔が縮まります。


そもそも字間を調整したい時はどこで編集すればいいの?と言う方は下記を参考にしてみて下さい。
よく使用される代表的なソフト2つ、「Adobe Photoshop」と「Microsoft PowerPoint」の字間の設定画面です。


文字の特徴に合わせて字間を調整しよう!

文字には、漢字、ひらがな、カタカナ、英語、記号など様々な種類があります。更に同じひらがなの括りの中でも、丸っこい字、四角い字、細い字など形も様々です。
種類や形の組み合わせによって、字間が広かったり狭かったりと変わることがあります。
まずは全体の字間はどれくらい広げようかな?と目的を定めます。「ゆったり読めるようにしたいから広げよう」「既定のサイズに収めたいから縮めないと」など、ざっくりでいいのでいいので決めます。

それでは早速、下記の例文のバランスを見てみて下さい。また、この例文を調整する目的は「デフォルトの設定を元に、バランスを均一になるように調整する事」です。

デフォルトの設定で文字を打ち込んだままだとこのようになります。
まず「、」と「家」の間が開きすぎているなと思った方も多いのではないでしょうか。
、。「」などの記号は、デフォルトの設定だと字間が広いくなってしまいますので、調整が必要な事が多い部分です。
特にタイトルや短い文章で記号を使う際は、記号の前後の間隔が広いと不格好さが目立ってしまいます。その為、全体のバランスを見ながら調整してあげましょう。

では、実際に字間を調整してみます。
今回は「、と家の字間が広すぎる」ので、カーニングで調整します。

そもそもテキスト全体のバランスをまず変えたい…と言う方は、カーニングを弄る前に、トラッキング設定を行いましょう。全体を整えてから、細かい微調整を行うイメージです。
例えばもう少しテキスト全体の字間にゆとりを持たせたいと言う方は、トラッキングの値をプラスすることで選択した全ての文字の間隔を広げることができます。

話を戻しまして、今回使用している「小塚ゴシック Pr6N 36px」のカーニング設定を変更して文字を詰めたいと思います。

「、」と「家」の間のカーニングの値を、0pxから-400pxにしました。ここだけ飛び抜けて字間が広かったのが、周りと均衡が取れるようになりました。
私はカーニングをよく使うのですが、詰めるだけなら文字ツメの値を変更するやり方でも大丈夫です。むしろ文字ツメの方が早くて使いやすい!と言う方もいるかもしれないので、自分の使いやすい方で調整してみて下さい。

次に「W」と「は」、英文と和文の字間です。細かい部分ではありますがここも若干広くなっていますので、カーニングで調整を行います。「W」と「は」の間のカーニングの値を、0pxから-150pxにしました。

余談として応用編にはなってしまいますが、どうしても綺麗に組めない、納得いかない時は、フォントから調整する必要があります。英文には欧文フォントを使用した方が綺麗に組むことが出来ます。また、和文がゴシック体なら英文にはサンセリフ体を使用する、線の太さや雰囲気が似ている物と組み合わせるなど、フォントから気を配ることが望ましいです。
例えば「HGSゴシックE」は、デフォルト設定では下記の図のように英文が半角で表示されてしまいます。比率が縦長の文字と正方形の文字が並んでいてバランスが悪く、見る時に違和感を感じてしまいますね…
そんな時こそ欧文フォントに変えてみて下さい。和文で使用しているゴシック体に合うように、欧文フォントはサンセリフ体の「Myriad Pro(フォントの太さ:Semibold)」を使用します。

文字のバランスが統一されて、自然で読みやすい文字の並びになったのではないでしょうか。
もちろん、和文フォントをそのまま使用する事も間違いではありませんよ!あくまで見易さの観点からバランスを考える時、こだわりのデザインを表現したい時に考慮してみて下さい。

また和文フォントと欧文フォントを組み合わせる際の注意点ですが、同じフォントサイズでも欧文フォントの方が小さく見えることがあります。
その為、欧文フォントは少し大きめに設定してあげると綺麗に見えます。今回は「GW」の部分だけ、「小塚ゴシック Pr6N 36px」から「小塚ゴシック Pr6N 38px」にちょっと大きくします。

微妙な変化ではありますが、バランスが良くなったのではないでしょうか。特に英文と漢字の大きさを比べるとバランスが改善されたのがわかるかと思います。

他にも字間の特徴は様々で、デフォルトだと漢字は少し詰まり気味、ひらがなは開き気味などもあります。隙間のバランスをどこに合わせるのかを決めて、広げたり縮めたりしてみましょう。
上記を踏まえて、最後に例文の微調整をしてみたいと思います。

これで目的達成です!
まったく字間を調整しなかった場合より、調整してあげた方が全体のバランスが統一されて見やすくなったのではないでしょうか。
ちなみに字間の調整を行った箇所は全部で6ヵ所になります。

もしここまで来て「やっぱり全体の字間を広げたい…」「縮めたい…」と思ったら、トラッキングの値を変えてイメージに近づけて下さいね。


おわりに

いかがでしたでしょうか?
バランスは文字や文章によって様々ですし、美的感覚も人それぞれなので具体的な数字で正解を出すことが難しくもあります。だからこそ、まずはやってみることが大切でもあります。
A4の紙の中で組むのか、幅640pxのバナーで組むのかなど、様々な条件や目的に応じてやってみることで、適切なバランスに作っていくことが出来ます。
興味を持って頂けた方は、今回の例文などを参考にぜひ試してみてください!


↓↓前回のおさらいがしたいなという方は、ぜひこちらもご覧ください!↓↓

たのしい文字組み―字間と行間―


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

Pocket