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

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

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

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


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

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


トラッキング(字送り)

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

カーニング

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のバナーで組むのかなど、様々な条件や目的に応じてやってみることで、適切なバランスに作っていくことが出来ます。
興味を持って頂けた方は、今回の例文などを参考にぜひ試してみてください!


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

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


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

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

こんにちは!
卒業シーズンですね!帰宅中に袴姿の若い女の子を見かけると、フレッシュだなぁとしみじみしてしまいます。
学生を卒業したよ~と言う方は、4月からの新生活に備えて春休みを思いっきり楽しんで下さいね!

さて、今回のテーマですが「文字組み」についてです!

これから新入社員やデザイナーになる方は、パワポで資料をまとめたり、文字を使った制作物を作る機会は必ずあると思います。
大切な資料やお仕事なので、読みやすくて綺麗な物を作りたいですよね?そんな時に役立つ、綺麗で読みやすい文字組みについてまとめてみました。

ちょっと気をつけるだけで簡単に出来る基礎的な内容になっていますので、文字が読みづらいな…と悩んでしまった時の参考にしてみてください。


文字を「組む」とは?

「組む」とは、簡単に言うと文字を並べることです。「組版」と言ったりもします。
雑誌や新聞の文章だったり、お菓子などのパッケージに書かれた文字、スマホやPCのディスプレイで表示されているテキストの並びも、文字を組んで出来上がっています。

なぜ「組む」と表現するのかと言うと、諸説ありますが…

Wikipediaによると「本来は活版印刷の用語で、文字通り版を物理的に組むこと、活字を並べて結束糸で縛ったものを「組み版」と呼んだことに由来する。」だそうです。

昔からの手法である、活字の書かれた判子をルールに沿って組み合わせて印字する様子を元に、そう呼ぶようになったのだと思います。


見やすい文字組みの基礎 ―字間と行間―

文字組みの基礎に「字間(じかん)」と「行間(ぎょうかん)」があります。
文字通り「字と字の間」「行と行の間」を指す言葉です。

この“ 間 ”が大事で、ここがちょっと違うだけで文章の読みやすさが変わってしまいます。

まずは「字間」について見てみましょう!例えば下記の文章を読んでみてください。

ちょっと読みにくいですね。ここで、字間を開けてみましょう。

さっきより読みやすくなったのではないでしょうか?
少し変えてあげるだけでも、文字の読みやすさはこんなに変わってきます。

では、字間の幅はどのくらい開けたら良いの?と言う疑問が出てくるかと思います。
これは、フォントや文字の大きさ、テキスト領域によって状況が異なりますので、厳密にこれだけ開ければ正解!と言うのはありません…。状況に合わせて、自分の目で確かめながら調整する必要があります。
ちょっと応用編になってしまうため今回は割愛させて頂きますが、もっと細かい話になると「漢字」「ひらがな」「英語」「。」「、」など、文字1つ1つの特徴や組み合わせによって細かく字間を調節したりもします。

次は「行間」についてです。下記の文章を読んでみてください。

とても読みにくいですね…。文章の内容が頭に入ってきにくいのではないでしょうか。
文字や行が多ければ多いほど読むのは苦痛になってしまいます。大切なプレゼン資料やデザインのテキスト構成がこんな状態では、伝わる物も伝わらない!なんてことも…

そんな時は行間を開けてみましょう。

印象がだいぶ変わりましたよね。
一般的に、行間は文字サイズの50%~70%が良いと言われていますので、フォントや文字の大きさに合わせて調節してみてください。

さらに、字間も広げて調節してあげると・・・

最初と比べると、かなり読みやすくなったのではないでしょうか!

このように、ちょっと気をつけて組んであげるだけで、文章の読みやすさは大きく変わってきます。

パワポやAdobeなど各ソフトで文章を入力する際、デフォルトの設定だと字間や行間が狭く読みにくい場合があります。
今回のことを少しだけ意識して調整するだけで、資料や制作物の完成度がちょっと上がるのではないでしょうか。

ここで1つ注意したいのが、字間も行間も、コンセプトもなく過剰に広げるのは良くありません。
下記の文章のように、意味もなく広げるとかえって読みにくい事もあるので、文字の大きさや文章量、状況に合わせて適度な間隔に調整してみてください。


おわりに

いかがでしたでしょうか?
文字組みはちょっとした変化で印象が変わるので、奥が深くとても楽しいものです。
拘りだすとキリがなくなったり、客観性を失い意図せず読みにくくなることもありますが…

コンセプトとルールを定め、読む人のことを考えれば、きっと綺麗な文字が組めるようになります。
興味を持って頂けた方はぜひ試してみてください!

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

マテリアルデザイン~実演編~

こんにちはもしくはこんばんは!
デザイン業務に関わっております、デジマースのスガです!
2017年初アップとなります♪

先日鏡開きでしたが、おもちは頂きましたでしょうか?
私は年末より鏡餅をロックオンしておりましたのでしっかり食べました!

さてさて、今回は良く見るWEBサイトの表現をマテリアルデザインにしてみたらどうなるのかな?
という実験的なことを部分的にとりあげてみたいと思います。
言葉より実際に目に見えた方が分かりやすいので、画像中心におおくり致します。
※わたくし個人の主観が入っております。

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


①メニューを開く

よく見るメニューマークですね。タップすると何らかの形でメニューが開かれます。
左側の「従来」の形は見たことがある方が多いと思いますが、ページが切り替わるので、
一瞬メニューを開く流れが目の前からプツっと途切れたように見えます。遷移が遅かったら尚更です。

右側の「マテリアルデザイン」の方はタップしてからメニューが開くまでの流れが途切れずユーザーを誘導してくれています。
よくよく見るとメニューマークが切り取られ開かれたメニューに付属し、最後には戻る矢印に変換されています。
開いてから閉じるところまでさりげなくユーザーを誘導しています。

②ボタンタップ

一見、どちらのボタンもタップ時に色が変わっていますので、押したかどうかの判別はしやすいです。
あえてを言えば「マテリアルデザイン」の方はタップした際に指で触れた部分に変化が起きているため自分がどの部分に触れたか、よりリアルに体感できますね。

③ログインの遷移

手順としては、どちらも申し分はないですが①のメニューを開く同様「マテリアルデザイン」の方はタップしてからメニューが開くまでの流れが途切れずユーザーを誘導してくれています。
人は動いているものについつい目が向いてしまうものですが、モーションが入ることで自然とユーザーの行動を分かり易くサポートしてくれているのですね。

如何でしたでしょうか。
あくまでほんの一部ですが、見え方・捉え方に違いがあるのが分かると思います。
流れが切れずスムーズに遷移してくれるとモチベーションも上がりますよね。

一旦、今回にてマテリアルデザインについて最終回となります。
機会があればまた、同テーマについて書いていきたいと思います。

★★過去記事おさらいはこちら★★


マテリアルデザインを読む

マテリアルデザイン~アニメーション~を読む

マテリアルデザイン~アニメーションpart2~を読む

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

マテリアルデザイン~アニメーションpart2~

こんにちはもしくはこんばんは!
デザイン業務に関わっております、デジマースのスガです!

2016年も残すところあとわずかになりました。
お家の片づけも仕事もやる事いっぱいの師走は本当に忙しいですね。
日に日に時間の流れが速くなっているような気がします。

さてさて、前回の記事にてマテリアルデザインのアニメーションについてお話しさせて頂きました。
今回も引き続きアニメーション部分に触れていきたいと思います!

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


簡単に前回のおさらい!「マテリアルデザインのアニメーション」とは?

★マテリアルデザインとは触感的表現を含ませたものをさしますので、
よってアニメーション効果にもリアリティのあるルールを適応
★現実的な動きに合わせたモーションが推奨されている

マテリアルデザインのアニメーションの利点とは?

さっそくではありますが、アナタは下記の様に見たい記事を見つけました。

pic_161222_01

如何でしょうか。このパッと切り替わる動作は普段見慣れている人が多いかと思います。
求めている動作が早いことはとても良い事です。
まるで、長いマラソンのスタートとゴールの部分だけを見た様な感じです。

そこで、もっとユーザーメリットが組み込まれたらどうでしょう?
動作からすぐに結果が出ている時点でスピード面において充分メリットがありますが、
ここに「ユーザー自身が行った動作に対して、今自分がどのような状態なのかが一目で分かる」とどうでしょう。

またまた、アナタは下記の様に見たい記事を見つけました。

pic_161222_02

如何でしょうか。動作と結果の間にこのようなモーションを加えることで、
ユーザーは自分が行った行動に対して、アクションが起こるので、
今自分がどのような状態なのかが一目で分かる状態になります。

長いマラソンはスタートとゴールの間に、走っている過程があります。
その過程の部分をマテリアルデザインではユーザーの操作に合わせてリアリティのある現実的な動き
を加えスライドや拡大などのモーションで次のページへ誘導を行います。
つまり今までなかったはっきりとした遷移過程のアニメーションによって、
ユーザーの目線の動きもバッチリとらえ(人はつい動くものなどを追ってしまいますよね)
次々起こる動作をスムーズに解消していくことが出来ますね。

最後に

現実的な動き(例:スタートとゴールの間)に合わせたモーションを加えると操作もより分かりやすくなります。
これらのモーションには様々な種類があり、スライドしたり、画面内のパーツが入れ替わったり回ったり……様々なものがあります。

もしこれからスマートフォンでサイトなどを見るときに少し注意して見てみて下さい。
特に気にしていなかっただけで、実は上記のようなモーションで誘導されていたかもしれません。

まだまだ、マテリアルデザインは奥が深いですね。
次回もマテリアルデザインについて、項目をピックアップしながら全部を理解せずとも、デザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。

それでは、またお会いしましょう!

マテリアルデザイン
~アニメーション~

こんにちはもしくはこんばんは!
デザイン業務に関わっております、デジマースのスガです!

前回の記事にて、マテリアルデザインはこのようなもの、とざっくりお話しさせて頂きました。
今回は「マテリアルデザインのアニメーション」に触れていきたいと思います。

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


簡単に前回のおさらい!
「マテリアルデザイン」とは?

★「マテリアルデザイン」をそのまま直訳すると「物質的デザイン」という意味になる!
★デバイスが変わってもユーザーが使いやすいUI表現を目指す!
★フラットデザインに「光」や「影」、「奥行き」の触感的表現を含ませたものが「マテリアルデザイン」
★マテリアルデザインでは影の要素が大事!
フラットデザインとは異なりオブジェクト同士の階層の構造が重要になり、高さの概念がある。
★マテリアルデザインでは、1つのページ内で色を多様しません。

マテリアルデザインのアニメーション

アニメーションといえばざっくりいえば動いているものを連想しますよね。
ですがマテリアルデザインとは触感的表現を含ませたものをさしますのでアニメーション効果にもリアリティのあるルールを適応させます。

例えば……

pic_161118_01

pic_161118_02

コロコロ…

pic_161118_03

紫のボールが先にゴールへたどり着きました。
もちろん紫のボールの方が急斜面になっていますので、スピードが早くなります。
黄色のボールの方は斜面が緩いのでゆっくりとした速さで進んでいきます。

この結果は現実的な自然なのものとなっています。
けして、紫のボールと黄色のボールが距離は同じといえど、斜面の関係から同じ速さにはなりません。

★基本的に状態が同じものを除き、アニメーションを行う際は個々のUIパーツが加減速され、等速の動きは致しません。
現実的な動きに合わせたモーションが推奨されます。

pic_161118_04

仮想ではなく現実によせることで、よりユーザーの視点や動きに合わせた表現が可能になるそう。
静止画の見え方だけではなく動的な動きの見せ方も新しさを感じますね。

まだまだ、マテリアルデザインは奥が深いですね。次回もマテリアルデザインについて、項目をピックアップしながら全部を理解せずとも、デザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。

それでは、またお会いしましょう!

8bit風 シンプルなUIデザイン

今回は、「8bitに学ぶUIデザイン」です。


「8bit」とは?

80年代に活躍したコンピューターゲーム機の画面表現力を「8bitの表現」として考えた場合

  • 扱う情報量が少ないので「アイデア」に比重が置ける
  • 個人でできる作業量
  • 低解像度/低発色数による簡素な表現により想像力を掻き立てる
  • 制約に挑戦する
  • 必然と「アイコン化/シンボル化」された画像
  • 以上のポイントでしょうか。

    今回のテーマはここからが本題で、
    ある意味何でも表現可能になった現在の情報デザインに、8bit時代の環境や表現、そして制限を「デザインルール」としてあててみようという主旨です。

    広い表現力の弊害

    現在、情報デザインを考える際、
    「広い表現の幅」は、問題点の認識を遅らせたり、表現を複雑化してわかり難くする状況があります。
    実はこれが、
    開発案件では大きな問題になり、「悪いUI」を生む要因になっています。

    そこで、「8bit風デザインルール」の登場です。

    大げさですが、要はただのシンプルデザインレイアウトルールで、今流行りのワードを使いたかっただけですが…このルールを充てることで、適切なUIデザインに必然となります。
    楽楽ですね。

    8bit風デザインルールとは?

    今度こそ本題です。

    それでは「8bit風デザインルール」の説明が以下となります。

    1)大きな(贅沢な)オブジェクトは無理なんです。

    2)画面内に溢れかえるオブジェクト…憧れるけど出来ません。

    3)ボタンを横並びに5個も置けません。

    4)画数が多い漢字は出しません…低解像度なので。

    5)点滅すると目が行きます

    以上はワイヤーフレームレイアウトなどを作る際に充てる怪しげなルールですが、
    説明は割愛します。

    まずは、出来上がったワイヤーフレームがこちら

    pic_161111_01

    シンプルな情報量になってますね。

    これからの工程はこれらの8bitルールで進めてみます↓

    6)カラフルな色なんて知りません!世の中白黒しか無い!

    前提として多すぎる情報量は余計なので、純粋に優先度や大きさ形の表現を検討する目的で、一切の有彩色を省きます。

    pic_161111_02

    7)配置の微調整必要なし!グリッドに置くだけ!

    それでは、
    まずは実際の8bit機よりもさらに簡素なグリッドフォーマットを作ってみます。

    pic_161111_03
    こちら厳密にはiPhone向けで、「44ルール」で作られています。
    横の解像度は320pxで一つのマス目はw36xh22で作られています。
    44ルールを使用してるのでその半分の22の高さで現実的なレイアウト再現させます。
    横軸に、ボタンなどのコンポーネントは横4個まで配置するルールを適用しています。
    左右にはマージンを既にとってます。
    楽ですね。

    それではマス目に単純に置いていきます。

    pic_161111_04
    テキストは端末依存のズレも大きいので、マス目のラインにセンター置きします。
    標準の中フォントサイズであれば上下の余白も同時にできます…が、
    大き目のフォントや複数行の文章の場合は別ルールを適応しましょう。

    8)裏ワザ?!アイテム?! 1色だけ使用が許されるスペシャルな拡張機能「アクセントカラー(挿し色)」!

    単色だけでは華がないので、スペシャルアイテムとして1色だけ有彩色の投下が許されますので、ここぞな場所だけで使いましょう!
    割合は色MAPの2、3%でしょうか。

    pic_161111_05

    いかがでしょうか?

    以上デザインルールでまとめたページがこちらです。

    pic_161111_06

    サービスカラーを充てるとこんな感じです。

    pic_161111_07


    コンテンツを提供するサービスであれば、
    コンテンツ自体の優先度は高くあるべきなのですが、
    実際は「サービス」自体を優先してしまい、色々な情報や広告、大人の事情、過度な色使いや装飾に埋もれてしまいがちです。
    振り返って原点に返り、理解しやすい表現を求めると、
    シンプルな方向性となり、シンプルになれば作業量も少なく効率的になり、結果、作業者にも、利用者にも、メリットが出てきます。

    フラットデザインも理解が得られている現状ならなおさら、
    もっと、考え方と作業はシンプルで良いのではないでしょうか?

    一度お試しください!

    以上、
    サービスデザインに関わっている、デジマースのネモトでした。

    マテリアルデザイン

    こんにちはもしくはこんばんは!そして初めまして。
    デザイン業務に関わっております、デジマースのスガです。

    さっそくではありますが「マテリアルデザイン」というものをご存知でしょうか?
    また、言葉だけは聞いたことがある方も多いのではないでしょうか?

    私自身も言葉だけは聞いたことは有りました。
    ですが実際に足を踏み入れてみると内容が深く、
    すぐに全てを理解するのは難しく感じました。

    ここでは全部を理解せずとも、デザイナーでなくとも何となく分かる
    をベースに「マテリアルデザイン」に触れていきたいと思います。


    マテリアルデザインとは?

    まず「マテリアルデザイン」とは2014年7月にGoogleが発表した新たなデザインのガイドラインです。
    このガイドラインによってアプリの外観について一連のルールが設定されました。

    ※「マテリアルデザイン」をそのまま直訳すると「物質的デザイン」という意味になります。

    マテリアルデザインの目的

    スマートフォンやタブレット、テレビ、メガネ、腕時計などのデバイスで統一感のあるデザインを取り入れることで操作性も統一され、デバイスが変わってもユーザーが使いやすいUIを表現できるそう。

    フラットデザインからマテリアルデザインへ

    まず念のためフラットデザインとは、デザインにおいて余分な要素を無くし、
    立体的な加工等の装飾を抑えることでシンプルに分かりやすくレイアウトやカラー構成で形成される平面的なデザインのことを指します。

    gazou1

    ★特徴として★
    ・デザインの装飾部分を排除する事でシンプルに特化しページ内のコンテンツを惹きただせます。
    ・ページ内の要素によっては適さない場合もあります。
    ・マルチデバイスの対応と共に普及。

    フラットデザインには今までにない新たなデザイン性を見出し
    メリットも有る反面、デメリットも目立つようになってきました。

    デザインの装飾部分を排除したことで、ページの見出しや帯、
    遷移できるボタンの区別などがし辛くなりました。

    そこで、フラットデザインに「光」や「影」、「奥行き」の触感的表現を含ませたものが「マテリアルデザイン」です。

    「影」要素

    マテリアルデザインでは影の要素が大事なものになります。
    フラットデザインとは異なりオブジェクト同士の階層の構造が重要になり、高さの概念があります。
    gazou2
    重ねるパーツの枚数によって高さ(上から見た奥行き感)を考慮し、影の表現を変えることでユーザーに「触れられるもの」ということを直感的に認識できるようにします。

    カラー設定

    マテリアルデザインでは、1つのページ内で色を多様しません。
    基本的には下記のような4色で構成をします。

    gazou3

    ・PRIMARY COLOR      :メインカラー
    ・DARK PRIMARY COLOR    :メインカラーと同系色
    ・ACCENT COLOR       :メインカラーと対比する色
    ・WINDOW BACKGROUND COLOR :無彩色、メインカラーと同系色

    こちらの4色での配色はあくまでも一例ですので、
    これらを逸脱してもマテリアルデザインでなくなるわけではありません。

    最後に

    気づかずに見ていたWEBサイトが実はマテリアルデザインがされているものであったということがあるかもしれません。
    少しでも「これは、マテリアルデザインかもしれない」と興味を持って頂ければ幸いです。

    私も勉強中の身ですが引き続き、全部を理解せずとも、
    デザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。

    それでは、またお会いしましょう!