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

こんにちは!
卒業シーズンですね!帰宅中に袴姿の若い女の子を見かけると、フレッシュだなぁとしみじみしてしまいます。
学生を卒業したよ~と言う方は、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サイトが実はマテリアルデザインがされているものであったということがあるかもしれません。
    少しでも「これは、マテリアルデザインかもしれない」と興味を持って頂ければ幸いです。

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

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