スマホ画面レイアウトのガイドライン/テンプレート

社内のスマートフォン(以下スマホ)向けのデザインガイドラインから、画面レイアウトデザインに絞って紹介します。

1. ガイドライン化の目的

2. 画面デザインの基本方針

3. HTMLで重要な「viewport」とは?

4. デザインしやすいフォントサイズ土台設定 read more

プロトタイピングの活用

スマホ市場も成熟期に入り、コンテンツ配信では競合も多く、
サービスの運営に不安を感じることが多くなっていると感じます。
そんな状況はサービス設計についても従来の設計から変革が必要となってきており、
コンセプトやターゲティング、ビジネスモデル構築に十分な時間をかけて設計を進めるリスクを避ける、迅速な発想の商品化が求められてきています。 read more

2016-2017 ブログまとめテスト

こんにちは、はらです。私の年内最後の更新となります。
今回は2016-2017年のデジマースブログの中からUIに関してクイズ形式でいくつか出題したいと思います。
どの問題もデジマースブログを毎週チェックしている方ならわかるはずです!?
※解答はページ下部に記載しています。
  read more

押せる画像・ボタンについて考えてみる

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

▼押せる画像・ボタン①

サイト内で画像やボタンを押す際に分かり辛くて、踏みとどまったり、探したりしたことはありませんか?
さて今回はそんな画像やボタンをどうしたらユーザーへ認識してもらいやすくなるか、改めて考えていきたいと思います。 read more

UIと配色

配色とは、2色以上の色を組み合わせ、配置および構成をする事です。 UIデザインでは、どのような配色を行うのかによって、使用感やユーザーに与える印象が大きく変化します。といってもUIデザインに限りませんが…。 色の扱い方はとても奥が深く、国や地域によって色に対するイメージは変わります。また、組み合わせ方は数え切れないため一言で配色について語りきる事はできません。一言でなくとも語りきれないと思います。 今回はよりカテゴリを絞り、色は色でもUIデザインにおける色(配色)のポイントについていくつかご紹介致します。

70% 25% 5%の配色

UIに使用する色数の目安は3色です。3色以上にする事が間違いと言うわけではありませんが、色数を増やしすぎると、どこを強調しているのか、どこに触れる事ができるのかなどが伝わりにくくなり、情報が整理されていないような見づらいUIになってしまいます。
しかし、色数を押さえたからといって適切に配色ができているわけではありません、使用する量も重要になります。UIにおいて実際に3色をどのようにして選び、使用するのかということは「70・25・5の法則」を意識すると選びやすくなります。70・25・5の配色はベースカラー70%、メインカラー25%、アクセントカラー5%にする配色法です。ちなみにこの「70・25・5」の考え方はwebデザインでは基本とされている配色方法です。 read more

サイト内で迷子にさせないために

サイトに遊びに行ったときに迷子になったことはありませんか?
迷子になってしまうとユーザー本人もせっかく訪問したのに目的が達成し辛くなり、しまいにはサイトを離れてしまいます。
提供側もせっかく訪問してくれたユーザーを離脱させてしまう事はとても勿体ないことです。
では、どういった状況でそのような事が生まれてしまうのでしょうか、改めて考えていきたいと思います。 read more

ユーザーを混乱させないUIとは

アプリを使用するとき、皆さんは操作に関してストレスなく使用できていますか?あえて説明を聞かなくても、「これは押せる」「これを押せば戻る」など理解できていますか? 普段アプリを使用している方なら、チュートリアルを確認したり説明を聞かずとも「これは押せるな」と、“ある程度予想ができ”スムーズな操作ができるはずです。 実はこの“ある程度予想できる”というのはユーザーの使用経験が豊富というだけではなく“ある程度予想できる”ように設計されているからなのです。 UIでユーザーが混乱してしまう場面は様々です。目的の機能が見つからない、操作方法がわからない、表示されているアイコンの意味がわからないなど、書き出したらキリがないほどあります。 今回は色使い、エフェクト、位置でユーザーを混乱させないための方法をご紹介いたします。

ユーザーを混乱させないためには…

UIでユーザーを混乱させないためには、デザインのルールを決めサービス内で統一する事が必要です。UIデザインでは、色使い、エフェクト、レイアウトなどサービスを通して統一させる必要があります。 read more