スマホ画面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;
    }

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

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

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

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

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

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

こんにちは。ユイ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

簡単テキストエフェクト

私は昔、バナーを1年間で450個ほど制作していました。

商品の雰囲気に合わせたり…
目立たせたり…
磨耗していないレイアウトにしたり…
スペースを気持ちよく埋めたり…
など、様々な場面で私は何度もテキストエフェクトに助けられました。

今回は、そんなテキストエフェクトの中でも、簡単にできるわりにインパクトがあるものをいくつか厳選してご紹介いたします。
簡単にできるので急ぎの時でも安心です!

少し前にSNSで話題になっていた、RGBずらし(スタイル設定バージョン)などもありますので是非利用してみてください!

少し難易度の高いエフェクトもあります。
氷エフェクト> 炎エフェクト>


PhotoShopCC 2018、幅750pixel 解像度72pixel で制作しています。


スマートフォンのゲームで使われているような、ブロック風の立体感を出すことができるエフェクトです。演出できるのはかっこよさと言うよりかは、可愛さですかね!? かっこよくもありたいけど可愛くもありたい(?)そんなときに使うといいと思います。
スタイルの設定はシンプルにも関わらずインパクトのある装飾となるため、覚えておくと便利かもしれません!

RGBをずらすことにより、輪郭に独特な雰囲気を出す方法です。この「RGBずらし」は昔からある手法ですが、最近SNSで紹介され、イラストを描く方たちの間で若干話題になっていました。今回はそんな「RGBずらし」エフェクトをイラストではなくテキストにレイヤースタイルとして落とし込みました。これ、私は結構好きです。
※ベースカラーが濃い色の時に使用してください。それ以外だと、見えなくなります。
※サンプルの文字の色は白(ffffff)です

シンプルなストライプの入ったエフェクトです。これ自体はなんてことは無いのですが、グラデーションを重ねたり、ドロップシャドウを掛けたり、オリジナルパターンを重ねたりすることでアレンジが可能です。レイヤースタイル2項目で簡単実装できます。

“あるもの”をイメージして考案したエフェクトです。何に見えますか?正解は「新品の10円玉」です。レイヤースタイルは金属の表現が簡単にできますよね、ゆえに金属風加工チュートリアルはもうすでに沢山ありました。ですので今回はまだ誰もやっていないであろう新品の10円玉をモチーフに考案しました。さらにぎらぎらにしたい方はグラデーションの色数を増やしてみてください。お金が絡む見出しの演出にぴったりです。

ドロップシャドウを重ねるだけで押し出しを掛けたような立体感を出すことができます。こてこての3D表現ではないため様々な場所に利用できるはずです。PhotoShopやIllustratorには3D機能がついているため、表現によってはそちらの機能を使用した方が早いかも知れませんが、修正可能かつ独特な色使いを試してみたいという方はこちらの方法が良いかもしれません。

メタリックなエフェクトでは定番の中央にハイライトを持ってくる方法です。こちらのグラデーションは色使いや使用する場所を誤ると、ワードアートのような…パワーポイント資料のような…いかにもな仕上がりになってしまうので注意が必要です。今回は立体的なフチもおまけで付けました。


パッと見難しそうに見えますが、実はどれも簡単です!是非レイアウトに悩んだ時は使ってみてくださいね。

(はら)

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

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


デザインと修正

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

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

修正はデザイナーにとって切っても切れない関係なので、ある程度はどうしようもない事です。なので、必要以上に気に病む必要はありません。
何事も、一発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)に書き出ししています


最後に

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

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