バナー制作でおさえておきたいポイント

こんにちは。ユイPです。
最近2年使ったiPhone 7をiPhone XSに機種変更しました。画面とカメラの綺麗さにはテンションがあがりますが、まだ使いこなせている気はしません。

今回は「バナー制作の時におさえておきたいポイント」がテーマです。
以前「新米デザイナーが作る!バナーの作り方」という記事を書きましたが、あれから約10ヶ月…制作したバナーの数も10ヶ月前の時点では約300個でしたが、この記事を書いている時点で約800個まで増えました。1000個までもう少し。

前回の記事ではバナーの作り方を作業工程と共に解説していきましたが、今回はタイトルの通り、「バナー制作時におさえておきたいポイント」を解説していきたいと思います。

※前回の記事と少々書いてある事が被る部分もございます。
※またこの記事で使われているバナーは全て架空のバナーです。


バナーとは広告や宣伝などのために使われる画像の事です。
バナーの目的は主に「見た人にクリックしてもらう」事です。
掲載場所やターゲットによってデザインや訴求ポイントは変わってきますが、クリックしてもらうために「このバナーで誰に何を訴求したいのか」を考えて作っていく事が大切です。

これを踏まえて制作時のポイントを解説していきます。


1.めりはりをつける

例えばこの2つのバナーだったら、どちらの方が大事な文言がより強調されていると思いますか?
答えは下です。文字サイズの強弱や色の差がついているので「人気作品”無料”」という言葉が一番見せたい部分なんだなとわかります。
めりはりは文字サイズ、フォント、文字色などでつける事が出来ます。

掲載場所や内容によっては、文字や色のトーンが統一されたものなども使用されています。
そういったバナーは訴求力が重視されているのではなく、「雰囲気にあった」バナーである事が多いかと思われます。
広告などで使われるバナーは目を引く事が大事になってくるので、人の目に触れてほしい部分がどこかを考えて、強調する部分と控えめでいい部分、差をつけて作っていきましょう。

2.不自然な”余白”は埋める

このバナー…どうにも真ん中の文言と写真の間の余白が気になりませんか??文字や写真/絵を調整すれば埋められそう?…そんな時はどうにかして埋めてしまいましょう。

という事で文字の組み換え、写真のサイズ調整などをしてみた所、見事に埋まりました。
変な余白があるとなんだかそこに目が行きがちですし、画面も寂しくなります。文字を大きくする、組み方を変えてみる、文字間や行間の調整、画像があればその位置を調整してみる、図形や線を足してみる…など余白の埋め方は色々あります。
もちろん余白を活かしたデザインというのもありますので、埋めるのは”不自然な”余白です。

3.要素を散らばせない

人の目線は左上から始まり右下で終わる、Z型の流れのレイアウトが見やすいというのはどんな媒体にも言える事ですね。
もちろんバナーも、そういった流れを意識して自然と読みやすいように制作しています。

例えばこのバナー、要素が四方に散っているし、図形は多いし、どこが大事でどこから読めばいいのか…読めない事はないけど散らばっていてなんだか気持ち悪い…。
なので流れを意識して作ってみます。

これなら、上の情報と下の情報、混乱せずにスッと読む事が出来ると思います。要素を分散させずに、図形や線を使う時もバランスには注意しましょう。

4.困ったら位置変え・傾ける

基本の法則は守っているけれど遊び心がない。つまらない。そんな時は思い切って文字の位置を変えたり、傾けてみたりしましょう。

ちなみに傾ける時は左下から右上に向かって↗この角度で傾けた方が文章が読みやすいです!

5.表示されるサイズを考えて作る

私は普段1020×360のサイズのバナーを作る事が多いです。そのサイズを開いていると、普通にPhotoshopの画面いっぱいくらいに大きく表示されていますよね。
ここで陥りがちなのが、「スマートフォンの画面サイズで見た時に、文字がちゃんと読めるか?」という問題です。

このバナー、PCの画面では大きく見えていても、実際にサイトに掲載されたら…(スマートフォンでこのブログを読まれている方には既に見えづらいかもしれません)

こんな風に小さくなりますよね。こうなった時、このバナーの上の部分の白文字、読めますか?正直読みにく~~いですよね。
こうならないためにも、ある程度サイズが小さくなった時の事も考えて制作しましょう。
今回はこのように調整してみました。

白文字の部分に太字の効果をかけ、背景に濃い色を引いてみました。先ほどのよりは少しは見やすくなったかと思われます。

このように情報量が多いバナーだと限界もありますが、出来るだけ配慮して制作しましょう。

6.文字間・行間の設定はしっかり

文字が主役なバナーにとって、これは本当にとっても大事な事です。

文言・配置は同じでも、上のバナーよりも下のバナーの方が、読みやすいと思いませんか?文字間を調整する事で「55%OFF」の部分は更に大きく強調されていますし、緑枠の中の説明文も間を開ける事で読みやすく、無駄な余白もなくなりました。少し調整するだけで、こんなにも変わります。
文字は手動で調整してバランスを美しく整えましょう!


以上が、私がおさえておくべきだと思うポイント6つになります。

とは言え私もまだまだ勉強中で完璧ではありません。上記の内容も最初からわかっていたものではなく、色んなバナーを見て学んだり、たくさん指導して頂いて覚えたものです。
バナー作りにこれから携わる方は、色んなバナーを見て、学んで、たくさん作ってみてください!

それでは、また。
ありがとうございました。

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

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

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

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

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回)]で増やします。

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


最後に

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

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

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

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

「金」

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

●完成です

●使用例


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

(はら)

簡単!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;
    }

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

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

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

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

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

タイトルロゴ風 文字デザインをしてみよう

こんにちは。ユイPです。
東京では桜が咲いていますね!暖かくなってきて春を感じています。

さて、今回のテーマは「文字デザインをしてみよう」です。
皆さんは普段、小説や漫画、ゲームやアニメなどの「タイトルロゴ」に注目した事はありますか?
私はロゴを見るのが好きなのでいつも注目してしまうのですが、気に入ったデザインのものはそれだけで作品が印象に残る事もあります。

今回はそんなタイトルロゴ風の文字の作り方について解説していきたいと思います。
複雑なものではなく、誰でも出来るシンプルかつ簡単に出来るものです!


使用ソフト:Adobe Illustrator CC 2018
作業環境:Windows 7 / 温かいお茶と好きなおやつ


今回は誰にでも使える定番フォントを使用して、一色のロゴを作っていきたいと思います。

まず準備を行っていきます。
Illustratorの文字ツールでアートボード上にテキストを置きます。

ここで使用しているフォントはどのPCにも入っているであろう定番フォント、「MS 明朝」です。

文字を選択ツールで選択して、アウトラインの作成を行ってください。
アウトラインを作成したら、グループの解除をして一文字ずつ動かせる状態にしてください。
これで準備はOKです!文字を自由に動かしたり変形させていきたいと思います。

———————————————————————————————–
Check!!【選択ツールについて】
選択ツール→オブジェクト全体を選択する
ダイレクト選択ツール→オブジェクトのアンカーポイントやパスのセグメントを選択する
状況によって使い分けが大事です。
———————————————————————————————–

Point.1 文字の大きさをバラバラにしてみる

選択ツールで文字を移動させたり拡大縮小を行って、文字の大きさを変えてバラバラに配置してみました。

なんだかもうこれだけでちょっとロゴっぽくなりますね。

Point.2 パーツを分解してスキマを作ったりアレンジしてみる

文字のパーツを分解して、線と線の間にスキマを作ったり、部首などをアレンジしていきます。

ここでは「初恋」の文字の○をつけた部分に手を加えていきます。

まずは「初」の部分から行っていきます。
「初」の部分を選択して複製します。複製のやり方はコピーしてペーストでもAltを押しながらドラッグでもなんでもOKです。

次に複製した「初」をダイレクト選択ツールで選択→複合パスの解除を行ってください。これでパーツごとに動かす事が出来るようになります。(複合パスの解除は全ての字にやるのではなく、解体する文字にだけやるのがおすすめです)
そうしたらいらないパーツを選択して、消去します。いらないアンカーポイントは残っていても邪魔なだけなのでしっかり選択して全部消してしまいましょう!

元になる「初」もいらない部分を消去します。

少し大きさや位置を調整して、元になる部分にパーツを持ってきます。

恋も同じ手順で行いました。
「恋」という字だったのでわかりやすく、上のでっぱりの部分をパスでハートを作って置き換えてみました。

線と線の間に少しスキマが出来たり、パーツが少し拡大されているのがわかりますか??
スキマを作る事で文字にゆとりが出来ますし、パーツを拡大することでアクセントになります。元のフォントそのままでなく、遊び心を利かせる事が出来ました!
もちろんもっと分解や変形を行ってどんどんオリジナリティを出していくとよりいいと思います★

———————————————————————————————–
Check!!【ハートの作り方】
1.塗りなしの正方形を作成
2.右上のアンカーポイントをダイレクト選択ツールで選択して消去
3.線幅を太くして端を丸型線端にする
4.45度回転
———————————————————————————————–

Point.3 ペンツールを使ってアレンジを加えてみる

2で作成したものに、ペンツールの機能を使って更に少しアレンジを加えてみたいと思います。

ハライの部分にリボンのような曲線を加えてみました。よく目にする形ですが、ペンツールで輪っかを描くだけなのでとっても簡単です。

更にペンツールで文字の端っこまで線を延ばしていきます。
この状態で終わってもいいのですが少し物足りなさを感じたので…

線の真ん中にアンカーポイントを追加してぐにゃりと曲げてみました。

———————————————————————————————–
Check!!【アンカーポイント】
アンカーポイントの追加ツールを使ってパスのセグメント上にアンカーポイントを追加します。

ここでは画像の赤点の部分にアンカーポイントを追加して曲げています。
———————————————————————————————–

仕上げ

紹介した3つのポイントを組み合わせて、仕上げを行います。
強調したい部分やバランスを見ながら文字の配置を色々変えてみたりして…

こちらが完成形になります。
「初恋」と「ビターチョコレート」を強調するために接続詞の「は」は小さめにし、特に強調したいと思った「チョコレート」の部分を1番大きくしています。
どうでしょうか。ありふれたフォントでも少しアレンジするだけでタイトルロゴっぽくなったと思いませんか??

おまけで英文も追加してみました。イメージは切ない系のノベルゲームのロゴです(あくまでもイメージです)

基本の流れはこのような流れになります。
文字のサイズ変更、パーツの分解、変形、書き足しが出来ればシンプルなロゴは簡単に作れます!

という訳でサンプルとしていくつかロゴを作ってみました。

MS明朝のような初期フォントではなく、様々なフォントを使用しました!
それぞれ制作時間や手間はバラバラですが、ほぼ上の解説でやった事と同じツールしか使っていません。
デジマースブログチームでは基本的に「モリサワフォント」を使用しています。有償のフォント以外にも、ネット上には素晴らしいフリーフォントがたくさんありますし、Adobe Creative Cloudを契約していれば無償でフォントをDL出来る「Type Kit」というシステムもあります。私もそうやって色々な場所からフォントを見つけてきています。
(フリーフォントの場合は字形を大きく変形させるのは禁止なものもありますので、そちらは使用する際にしっかり確認しましょう)

ここまで紹介した文字デザインは、バナーやフライヤー、自主制作作品のロゴなどを作る時におすすめです。
また今回は全て白黒で紹介しましたが、ここに色使いなどが加わってくると更にデザインの幅が広がると思います。
(色を使ったロゴについても、いずれ書けたらいいなと思います。)


以上、「タイトルロゴ風~文字デザインをしてみよう」でした。
好きなフォントはフォーク系と明朝系のユイPがお送りしました。
ではまた次回!

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


<使用させて頂いたフリーフォント>
「チェックポイント★リベンジ」
よく飛ばない鳥 / マルセ / http://marusexijaxs.web.fc2.com/
「マキナス Scrap 5」
もじワク研究 / https://moji-waku.com/index.html

デザインと修正のためのコミュニケーション

こんにちは!
今回のテーマは「デザインと修正のためのコミュニケーション」です。
デザインに関わる上で避けられない「修正」への対処方法について、アプリ開発の観点からお話しします。
これからデザイナーとして世に羽ばたく方や、同じテーマで悩んでいるよ~と言う方に見て頂ければと思います。


デザインと修正

作っても直しても終わりの見えない修正、締切直前の戻し、追加依頼…。
自分のデザインが悪いからいけないんだと悩んだ事はありませんか?

それは、あなたのデザインが悪いのではなく、コミュニケーションが足りていないだけかもしれません。

修正はデザイナーにとって切っても切れない関係なので、ある程度はどうしようもない事です。なので、必要以上に気に病む必要はありません。
何事も、一発OKでトントン拍子に物事が完璧に上手くいく事はないからです。
クライアント、ディレクター、SE、営業など、様々な役職と価値観を持った不特定多数の人間が関わるプロジェクトであれば尚更です。

個人的な趣味の作品でない限り、デザインは1人で考えて完結させられる物ではありませんので、プロジェクトメンバーが納得出来る落とし所を考える事が大切です。
その対策として必要なのが「コミュニケーション」です。

コミュニケーションを活用して、不要な修正を回避し、必要な修正にしっかり時間を掛ける事で、良いデザインが作れるように工夫してみましょう!


デザインと修正のためのコミュニケーションとは

コミュニケーションと言っても、みんなで仲良くしましょう!と言うお話ではありません。
ここで言うデザインと修正のためのコミュニケーションとは、「途中のデザインを見せる」と言う事です。

途中のデザインと言うのは、「プロトタイプ」「ラフ」「全体像はまだ出来てないけど部分的に出来ている物」などのことです。

いきなり全力で100%の完成品を作って見せるのではなく、20%でも50%の完成度でも良いので、状況に合わせて途中経過を随時プロジェクトメンバーに共有して下さい。
こうする事で結果的に修正の負担を軽減する事が出来ます。

「未完成の物を見せるのは嫌だ…」「作り途中の半端モノなんだから修正しろと言われるに決まってるじゃないか」と抵抗感がある方もいるかもしれません。
どうして完成品ではなく未完成品を見せる事に意味があるかと言うと、修正が発生する原因の1つである「イメージと違う」への対策です。

全力で生み落とした100%の完成品に「イメージと違う」と言わてしまうと、それまで掛けてきた時間や労力が無駄になります。
また、ガチガチに作り込んでしまったが故に、細かい修正が出来なくなってしまいます。最悪の場合1から作り直す…なんて事も少なくありません。
更に、締切直前にこれを言われてしまうと、修正に掛けられる時間がギュッと短くなります。こうなると、とにかく締切に間に合うように作る事になりますので建設的でないです。

極端ではありますが、下記は、「イメージと違う」と言われるパターンの例です。

デザイナーとクライアントの間に「春らしい花」「可愛さ」「シンプルさ」に対する認識のズレが生じた為、このような事が起きてしまいました。
クライアントとしては「花なら何でも春らしいし可愛い」「花のイラストはシンプル(フラット)に」と考えていました。
デザイナーとしては「春らしい花=桜」「可愛らしくなるように、ピンクや淡い雰囲気に統一」「ゴチャゴチャさせずにまとめよう」と考えていました。
途中でこの認識のズレに気が付けてれば、根本から覆るような修正は回避出来たはずです。

これは誰が悪いと言う話ではなくシンプルに、デザイナーがクライアントの求めるイメージを理解しきれなかった、クライアントがデザイナーにイメージを伝えきれなかっただけに過ぎません。
そもそも言葉や、ネットや雑誌から拾ってきた参考画像を数枚見て合わせただけの認識で、デザイナーとクライアントがお互いのイメージをピッタリ合わせる事は難しいです。
人間の想像力には差や偏りがあります。そこを補う為に「途中のデザインを見せる」事が大切なのです。


途中のデザインを見せよう

途中で見せるタイミングはプロジェクトの規模にもよりますが、基本的にデザインする中で「ここはどうしよう」「ここは意見が割れそうだな…」と思ったら、それが見せ時です!
全体の20%の完成度だったとしても、確認したい事や気になった事があればすぐにプロジェクトメンバーに確認してもらいましょう。
大きなプロジェクトほど段階的に細かく途中経過を共有する事が有益ですし、小さ目のプロジェクトであればまずは70%くらいの完成度まで作った方が適切な場合もあります。

20%の完成度と言っても、ある程度キリの良い所までデザインを落ち着かせる必要はあります。
「プロトタイプ」「ラフ」「全体像はまだ出来てないけど部分的に出来ている物」など、確認したい問題点や状況に合わせて作ってみて下さい。
あくまでキリ良くなれば十分ですので、プロトタイプなどを作るのに時間を掛けすぎないでください。どんな要素があるのか、どんな問題点があるのか見てわかるレベルであれば完成度は重要ではありません。

途中でデザインを見せる目的としては、共通のイメージを共有する事で、お互いの認識のズレを早期発見し対処する為です。

この「認識のズレ」とは病気のような物で、発見が遅れると重症化しやすく手遅れのリスクも高まります。認識のズレが重症化した結果が「イメージと違う」です。
認識のズレも病気も、早期発見できた方が対処しやすく完治も早いです。
また、あえて完成度を抑える事でクライアントからの修正や要望に臨機応変に対応する事が出来ますので、100%作り込んだ物を修正するよりタイムロスが少なくなります。

クライアントとしても、想像だけでは考慮出来なかった部分を視覚的に補えるので、「想像では良かったけど、実際に形になると微妙だな…」など問題点に気が付くことが出来ます。
デザインを見ながらだと、「ここはもっとこうして欲しい」と言う具体的な指示も出しやすくなります。

途中のデザインを見せて、修正点があればプロトタイプを20%ほどの完成度で作っていくのも良いですし、比較的軽微な問題であれば打ち合わせの最中にラフをササッと描いてすぐに確認してもらうのも良いです。
このようにコミュニケーションを重ね、細かい部分も認識を刷り合わせてデザインを作って行ければ、最終的に完成した物が「イメージと違う」とはならないと思います。少なくとも致命的な修正は事前に防ぐ事が出来ます。


おわりに

いかがでしたでしょうか?
そもそも何故修正が来るのか。それは、デザイナーもクライアントも良い物を作りたいと考えているからに他ならないと思います。
ですが、タイミングとコミュニケーションによっては熱意が空回ってしまう事もあります。
そうならない為にも、修正を恐れるのではなく、不要な修正を防いで必要な修正に時間を掛けられるように、デザイナーとして出来る事を事前に行う事が大切です。

デザインと修正でお悩みの時は、ぜひ試してみて下さいね。

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

スマホ広告バナーサイズ表_無料動画バナー紹介!

スマートフォンバナー


ネットワーク系バナー

★モバイル_バナー(横×縦)

 ・320× 50 ADNW
 ・640×100 ADNW【高解像度版】

 ・320×100 ADNW
 ・640×200 ADNW【高解像度版】

★レクタングルバナー(横×縦)

 ・300×250 ADNW
 ・600×500 ADNW【高解像度版】


インフィード形式(横×縦)

 ・ 300×300 ①_スクエア型
 ・1200×628 ②_バナー型

※掲載場所によりサイズに差異があります


スマホバナーサイズのメモの意味合いで現在出稿があるモバイル向け広告を中心にサイズ表を下記に作成しました。※2018.3.5時点のデータ

モバイル端末も「ケータイ電話」と呼ばれていたフィーチャーフォンから、スマートフォンへ移行しました。

そして、モバイル広告サイズも解像度が増えて「ドット打ち」と呼ばれる技法が有効な抽象的領域を越え、構成も通常の印刷広告のような余白のデザインが可能となりました。

参考で、かつてマス広告として絶大な広告効果を出していた、ケータイ電話モバイル広告時代の代表的な広告サイズと事例を紹介します。


フィーチャーフォンバナー

192×53 QVGA端末向け_バナー

フィーチャーフォン向けのデフォルトバナーサイズ。使用する「レスポンスフォーマット」(「CLICK!」文字入りの黒枠部分)の
カタチとサイズが決められている。2018年の現在でも運用されている代表的なバナーサイズ


384×106 VGA端末向け_バナー

「デフォルトバナー」×2倍サイズ。フィーチャーフォン向けのVGA端末向けに特化して一時的に運用されていたバナーサイズ。SB枠で使用されてましたが運用コスト減の影響からか現在は運用されていません。


192×53 QVGA端末向け_アニメGIFバナー

「デフォルトバナー」に「GIFアニメ」を使うことで複数コマの差し替えアニメーションを再現できました。コントラストに違いの大きい2つのバナーを交互に表示させるだけでも利用者の目線をバナーに向かわせることが出来、静止画バナーと比較して広告効果を大きく改善できました。


192×53 Flashバナー

「デフォルトバナー」と縦横サイズやレスポンスフォーマットは同じですが、当時のリッチ仕様としてFlashで掲載が可能でした。「5kバイト」という少ないバナー容量制限のなかで、アニメGIFバナーでは再現できない(容量が約4~10倍まで増大)細かいアニメーションが表現できる唯一の手段として、モバイル広告の表現に多大な力を与えました。

無料動画バナー:FP時代の広告面にあふれた無料訴求のバナーを一部紹介↓

※記事用にFlash形式を動画バナー(アニメGIF)に書き出ししています


最後に

以上、一部のプラットフォームとサイズについて紹介しましたが、状況に応じて修正と追加します。
スマートフォン向けのクリエイティブは情報量が多いので迷いと迷走に陥りやすいと感じますが、
明確なルールを設定して必然的で効率的な作業を続けていきます。

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

イラレの初心者向け基礎ポイントを押さえながら簡単なペーパークラフトを作ってみた

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

Illustrator(以下:イラレ)にあまり馴染みのない方からするとイラレはポスターなどの平面で完了するデータを扱うイメージを持つ方が多いのではないでしょうか。
今回はそんなイラレの初心者向け基礎ポイントを押さえながら簡単なペーパークラフトを作ってみたいと思います。
季節は桃の節句なのでテーマは「お雛様クラフト」にします!

最終的に出来上がったペーパークラフトは一番最後にありますので良かったら作ってみてくださいね!
★ペーパークラフトが苦手な人にも小さい子でもできるように簡単版の付録もあります♪

※実際にペーパークラフトを組み立てるには、はさみやカッターを使用しますので、小さな子が作る場合は大人の方が切り取ってあげてくださいね!簡易版の編集は割愛させていただきます。

初心者向けイラレ基礎×ペーパークラフト

—————————————————————–
★作成環境:IllustratorCC2018(以前のものでも可)
★動作確認:Windows10
※所要時間:調整含め一日以上
—————————————————————–

題材のお雛様ですがこちらのイラストを使用します。

【1】全体像を最初に決めます

完成サイズは両手に乗る大きさにしたいのと、印刷する際、家庭用プリンタも考慮し馴染みが多いA4サイズのアートボードで作成。
今回の両手サイズのペーパークラフトですと新規アートボードは多めに予め5つ程用意しておきます。(大きさのイメージはA4コピー用紙5枚の領域)

作成で5つ開きます。複数ページやアートワークが多い場合は1つのアートボードで作成してしまうと印刷時や保存などの管理が大変になってしまいますので今回のように、A4に収まらないとわかっている場合は予め複数のアートボードを用意してしまいましょう!
(後の増減も可能です。)
※アートボードも使いすぎればその分データ量が増えてしまうので適度に使うと良いですね。

【2】キャラの簡略化

用意していた使いたいキャラがパスで描かれた丸みのあるイラストなので、このままクラフトにするには難易度が非常に高いため(私もどうしていいかわからないため)小難しい事はなしにシンプルに組み立てられるようキャラを簡略化させました。
枠線が無い方が綺麗だったので枠線も外しています。
頭の飾りは後で糊づけで対応。

丸みがあると側面を作る際に難しくなってしまうためすべて直線になるよう部分調整をしていきます。
イラレ上でペンツールを使って大まかに型どっていくと簡単です。
今回は曲線を使わないため「ペンツール」をカチカチとクリック、一部線を直したい場合はダイレクトツールでアンカーポイントを選んで動かす!これだけで出来ます。

※元の形を完璧に維持しようと線(アンカーポイント数)を増やすと側面が作り辛くなってしまうのでなるべく簡単にする事をおすすめします。
また、対象物が線対称のものは半分だけ作って反転させてもう片方にもっていくと綺麗に描けます!

猫の顔の部分を「リフレクト」を使って作ってみます。

①まずはイラストの半分~超えるくらいまでペンツールで線を描きます。
②その時、始点と終点がちゃんと合わさるようにします。

③描いた図形を反転させます。

【3】組み立てるための側面とのりしろを作ります

今回、立体部分は無難に厚みさえ持たせられればなと思っていましたのでシンプルに「厚み40px」のみ付けました。

線(アンカーポイント)が切り替わるごとに厚み40pxを付けていきます。メインの猫にくっつけていくイメージですね。
この、のりしろ部分は感覚で角度をつけて→メインの猫にくっつけています…が、対象物が線対称なのでここでも半分だけ作って「リフレクト」で反転させて持っていくと綺麗にできます。

因みに厚み部分の柄はこの段階でつけておくと楽です。
この組み立て部分を作っているときは頭で想像しながら自分との闘いでした…!

厚み部分を取り付け終わったら、のりしろ部分がダブらないよう注意しながら付けていきます。
また、折り要素が必要なところには軽く点線を入れておくと良いです!

このような作業をすべてのパーツに行いました!
ひな壇などの箱物はサイコロを作る感覚で作成しています。

最終的なアートボードはこのようになっています。
アートボード内に収まっている部分は、そのまま印刷したり、書き出し出来ますのでとても便利です。
また、今回3つのアートボードだけで収まってしまたので余分な2つのアートボードは削しても問題ございません。

イラレの基礎的な機能だけを使って最終的に以下のようなペーパークラフトが出来上がりました!
良ければプリントして作ってみてくださいね!印刷はA4(以上)を推奨します。

—————————————————————–
★用意するもの
印刷したクラフト用紙(A4推奨)、はさみ、カッター、のり
—————————————————————–

ペーパークラフト

細かい作業が好き、ある程度の立体物に仕上げたい方はこちらがおすすめです!

▼以下3枚

ペーパークラフト(簡易版)

ペーパークラフトが苦手な人・時間のない人・小さい子へ(ひな壇の組み立て、猫を二折りで出来ます♪)

▼以下2枚

 

最後に

イラレの基礎的なツールだけでもペーパークラフトが作れました!
つめれば様々なものを生み出せそうな気がします。

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