デザイン

デザイン

【フィッツの法則】押しやすい、クリックしやすいボタンの公式

フィッツの法則

押しやすいボタンの条件とは? 押しやすいボタン、クリックされやすいボタンには理由があります。 ボタンの色や形、フォント、大きさ、位置など、さまざまな条件がありますが、 今回は数学公式に基づいて、押しやすいボタンを研究してみます!! まずは押しやすいボタンの公式が数十年も前からあるのですが、 (実際にはボタン用ではありませんが。) フィッツの法則を学ぶところから。 フィッツの法則 ここで、 「T」は動作完了までの時間、つまり、ボタンをクリックしようとしてマウスを動かしてクリック完了までの時間です。 「a」はマウスの開始・停止位置です。今のところは便宜上これは考えなくてOK。 「b」は速度。マウスの速度です。 「D」はマウスの位置からボタンまでの距離を表します。 「W」は動きの方向に測ったボタンの幅、もしくは奥行きです。 もちろんlogは大丈夫ですよね? logは( )内が大きければ、その値も大きくなります。 ここで底の2は考えなくてOK。 もう少し分かりやすく言うと ボタンをクリックするまでにかかる時間は、 1. 今いるマウスの位置からボタンが離れているほど時間がかかる 2. マウスの動かし方が速いほど時間がかかる 3. ボタンの幅(奥行き)が大きいほど時間が短くなる 例として、こんな場合 仮に 1. 下から上に向かって 2. 右から左に向かって ボタンをクリックしようとすると、 上に向けた方の場合、目的のボタンの奥行きがせまく、 横向きの場合、目的のボタンの奥行きが広いことがわかります。 つまり、目的のボタン上でぴったりマウスを止めるには、このボタンの場合、 横にマウスを動かしたほうが、クリックまでにかかる時間が短いことがわかります。 ボタンがテキストリンクだったら テキストリンクの場合、ボタンリンクよりもさらに奥行きがせまくなり、 クリックまでに時間がかかることがわかります。 さらに文字の小さなテキストリンクなら、さらにクリックが難しくなり、 ユーザーがイラッとする原因にもなり、ページ離脱へとつながることも。 数学的に押しやすいボタンのまとめ (ユーザーがマウスを動かすスピードはコントロールできないものとして、) 目的のボタンの大きさはほどよい大きさで、 細長すぎるボタンもNG。 そしてボタンまでの距離(Webでは余白ですね)もあけすぎず。

デザイン

完全無料のみ厳選!パターンを選ぶだけなのにクオリティの高い年賀状

はがきデザインキット2017

年末が近づくとまた今年もあの季節。 年賀状のシーズンです! ハガキ年賀状は年々減少しつづけていて、年賀状発行枚数は2003年の44億枚をピークに、2016年は26億枚でした。 通信手段はメールか電話、友だちや家族ならSNSやチャットで連絡が当たり前になってきている今だからこそ、ハガキをおすすめしたい!! 年賀状注文は面倒? 年賀状の注文は写真やさん、印刷屋さん、比較的大きなスーパーなどでも取り扱っているほか、本屋さんで年賀状素材集などを買って自宅でプリントするのが大半でしょうか。 イラストレーターなどのソフトを使う手もありますが。 ちなみに弊社の年賀状は毎年イラレで描いています。 無料で作れる年賀状 最近無料で、かつクオリティの高い年賀状作成サービスが出てきています。「早くて」、「無料で」、「誰でも作れる」サービスをご紹介します。 郵便年賀.jpの「はがきデザインキット」 郵便年賀.jpは、あの郵便局が運営しているサービスです。 デザインキットはテンプレートを選ぶだけの簡単操作。 テンプレートは ・和もの ・カワイイ ・ポップ ・喪中・寒中  のカテゴリから選べます。 そのほか便利な機能として、 ・写真入れ ・文字入れ ・スタンプ入れ ・賀詞入れ などが可能です。 文字の色を変えたり、大きさを変えたりするのも、直感的にできるので簡単にオリジナルデザインが作れます。 できたデザインは、郵便局に印刷注文することも、データをダウンロードして自宅のプリンターで印刷することもできます。 「はがきデザインキット」はこちらから いらすとやの「ねんがや」 「いらすとや」は無料イラスト素材サイトです。 もしかしたらお店やWebページなどでいらすとやのイラストを見たことがある人も多いかも! こちらもテンプレート一覧からデザインを選んで、データをダウンロードするだけ。 あとはプリンターで印刷して完成! ・キャラクター ・版画 ・シンプル ・ゆるかわ ・おえかき ・コラージュ ・ししゅう・・・・などなど18カテゴリから選べます。 挨拶文のあり、なしを選択できるので、送る相手にあわせて選べますよね。 「ねんがや」はこちらから 「年賀状AC」 こちらも無料素材サイトの年賀状用サイトです。 年賀状ACはおしゃれなテンプレートのほか、ビジネス向けのテンプレートの種類も多くあります。 また、さすが素材屋さんということもあり、イラストだけ、背景・フレームだけ、賀詞だけのダウンロードも可能で、組み合わせてオリジナルの年賀状も作れます。 こちらも使い方は、好きなテンプレートや素材を選んで、ダウンロードするだけです。 「年賀状AC」はこちらから ( ´−`)。oO さて、弊社でも今年も年賀状のイメージを考えなきゃ

PhotoShop

太字にしても文字を潰さない方法「太字に強い無料の日本語フォント」付き

太字にしても文字を潰さない方法

PhotoshopやIllustratorなどで、太文字を書きたいとき文字がつぶれて見づらいことはありませんか? つぶれ文字の場合 文字がつぶれてしまった場合の多くは、 ・ボールド「B」で太くしている ・枠線をつけて太くしている こういうケースが多く見られます。 これは、元の文字の外側に太線をつけるため、スキマが埋められてしまうことでつぶれて見えるためです。 つぶれない文字にするには 文字をつぶさないようにするには、文字そのもののウェイトで調整します。 ウェイトというのは「太さ」という意味です。 例えば、「●●ゴシック-M」とか、「▲▲明朝-W3」などという、フォント名の最後にアルファベットや数字がついているのを見たことはありませんか? まずはフォント(文字)を選ぶ際に、ウェイトのバリエーションが存在するかどうか確認してから使うことをおすすめします。 太字にできる無料の日本語フォント そもそもどんなフォントが太字のバリエーションがあるのか、今回は無料の日本語フォントを紹介します。 M+フォント やや丸みのあるやさしいイメージのゴシックフォント。 極細から太字までフォントウェイトがあります。 【ライセンス】商用・非商用可。利用、複製、再配布可能。 配布サイトでダウンロード Kazesawaフォント こちらも丸みのある、認識性の高いフォントです。 エクストラライトからエクストラボールドまで6種類のウェイトがあります 【ライセンス】SIL Open Font License準拠 配布サイトでダウンロード 源ノ角ゴシック AdobeとGoogleが共同開発したオープンソースのフォントです。 エクストラライトからヘビーまで7種類のウェイトがあります 【ライセンス】SIL Open Font License準拠 配布サイトでダウンロード Rounded M+ 丸ゴシックのかわいい感じなのに品のあるのフォントです。 また、「標準」、「丸さ強め」、「丸さ弱め」からも選んでダウンロードが可能です。 【ライセンス】商用・非商用可。利用、複製、再配布可能。 配布サイトでダウンロード

デザイン

一瞬で伝わるきれいなグラフ(棒グラフ&円グラフ)

グラフの作成に気をつかっていますか? ExcelやPowerPointなどの資料作成や、チラシ・広告から、Webサイトに掲載するグラフを作成するときに、どの程度気をつかっていますか? グラフを利用すると、数値だけでは分かりづらい情報を、視覚的に伝え、訴えかけることができます。 今回は棒グラフと円グラフを例に、一瞬で伝わるきれいなグラフを作成してみます。 棒グラフの場合 まずはbeforeです。 国ごとに色分けされ、また、目盛りもしっかり入っていて、一見分かりやすいと感じるかもしれません。 しかしここで、いずれの情報レベルも相殺し合って、どの情報に着目してよいのか分かりません。 つまり、グラフを見ても、なんだか心に残らない、いまひとつ説得力に欠けてしまいます。 では次は、日本のデータに着目してもらえるようなデザインを意識した例です。 ここで注目すべき点は、かなりすっきりしたところです。 日本のデータ以外を目立たない色にすることで、見てもらいたいデータを引き立てることができます。 また、文字サイズ(フォントサイズ)も必要最低限は抑えめにしてあげることで、全体のバランスが取れるとともに、見せたい情報がより引き立ちます。 注目させたいなら引き算を 「目立たせたい」→「派手にする」の足し算ではなく、「目立たせたい」→「必要以外は抑える」の引き算に注意しましょう。 円グラフの場合 円グラフの場合のbeforeです。 アンケート結果を円グラフで表しました。 まあ普通、な印象だと思います。 しかし、質問内容、結果、凡例と、見なきゃいけないところがいくつもあって、どこにも集中できない状態になっています。 次にデザインを意識した例です。 円グラフの場合は全体的なバランスを意識してみるとよいでしょう。 かなりイメージがつかみやすくなりましたよね。 この場合は、視点の先をできるだけ動かさずに済むように、そして、質問の内容と結果がぐっと伝わるように、アイコンも入れています。 上手にアイコンを取り入れる アイコンや標識、サインなどは、その形で視覚情報に入りやすく、記憶にも残りやすいので、上手に活用するとよいでしょう。 しかし、テーマと関係ないアイコンや、一度に多くのアイコンを使うのはユーザを混乱させてしまうので注意してください。 ぜひ伝わるグラフ、印象に残りやすいグラフ、説得力のあるグラフを作ってみてください。