*簡単!Illustrator素材を作ろう『さくら』編*

こんにちはもしくはこんばんは!
デザイン業務に関わっております、スガです!
春を迎え、お店にはさくらをテーマにした限定グッズを見かけますね。

さぁ今回はそんな『さくら』をIllustratorで簡単に描くメイキングを
書かせて頂きます。簡単にできます。角度が上手くいかない!
問題ございません!1つ作ると多用できますのでとても便利かつ
今の時期には持ってこい、な内容になっております。
—————————————————————-
★作成環境:Illustrator CC(作成に於いてCSシリーズも対応)
★動作確認:Windows7
★所要時間:12分(慣れると5分)
—————————————————————-
*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*

▼ラインナップ

今回ご紹介します『さくら』のタイプは3パターン。
基本作成の仕方は同じです。最後の調整のみ変わります。

▼『さくら』メイキング

■【Ctrl+N】またはファイルの新規よりA4のアートボードを開きます。
 今回、カラーモードはRGB

■ツールの楕円形ツールで円を描く。
【縦100px横60px・色#ff99c3】(基本的に楕円であれば何でもOK)

■ツールのアンカーポイントツールを選択し、上下のポイントをクリック。
(ペンツールを長押しで項目が出てきます)

■ツールのアンカーポイントの追加ツールを選択し、下記の様に2箇所に
ポイントを追加します。
(ペンツールを長押しで項目が出てきます)

■ツールのダイレクト選択ツールを選択し、下記の様に頂点のポイントを
少し下へ下げます。ここで花びらの形が決まります。

■花びらを五枚にする。以下好きな花の形へお進みください。

▼最後に

以上でさくらの完成です。いかがでしたでしょうか?
あくまでも数字は参考なので、いろいろ自由に試してみて下さいね!

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

Pocket

派遣登録でお祝い金10,000円プレゼント!春の就業意欲向上キャンペーンを実施中!

こんにちは。デザイン業務に関わっております、コンドウです。

だんだん日が延びてきましたね!
17時になってもまだ外が明るいと、なんだか得した気分になってしまいます。

今回は、いつもブログを読んで下さる皆様に、デジマースからお得なキャンペーンのお知らせです!

2017年3月7日(火)から2017年3月21日(火)の期間限定(※期間延長する場合があります)で、弊社求人情報サイト『ジョイジョブ』で、「派遣登録でお祝い金10,000円贈呈!」と言う就業意欲向上を目的としたキャンペーンを実施致いたします。


今だけ!登録お祝い金が480円から10,000円に!

ジョイジョブでは、派遣登録して下さったユーザーさんに登録お祝い金をプレゼントしています。
そのお祝い金が、通常480円のところ、キャンペーン期間中に限り10,000円になっています!
『ジョイジョブ』に訪れたユーザーの就業意欲を高め、応募者数・登録者数を増加させることにより、求人案件を掲載している企業の人材獲得を強くサポート致します。

1.キャンペーン対象の求人に応募

 

2.派遣登録会に参加

3.ジョイジョブからお祝い金を申請


業界初!継続お祝い金もプレゼント!

採用後3ヶ月間継続して働いたユーザーには、登録お祝い金に加えて、求人情報サイトとして業界初となる「継続お祝い金」を導入し、プレゼントしています。
ユーザーは登録お祝い金にプラスして、継続勤務でもお祝い金を受け取ることができ、継続率アップに繋がります。


【ジョイジョブとは?】

『ジョイジョブ』はスマートフォン向けの求人情報サイトです。
初期費用、月額費用、管理費用0円で、案件数や期間の制限なく求人情報を掲載することができる成果報酬型のサービスですので、余分なコストをかけずに、効率的に採用活動を行えます。
『ジョイジョブ』経由で応募したユーザーには登録お祝い金または就労お祝い金と、3か月の継続勤務で対象となる継続お祝い金をプレゼントしており、就労したユーザーの定着率増加が見込めます。

『ジョイジョブ』では、アパレルや携帯販売などを中心に人気の求人情報をたくさん紹介していますので、お仕事探しにご活用ください!


■サービス名称
ジョイジョブ

■URL
http://joy-job.jp

■Twitter
アカウント: @digimerce_PR
URL    : https://twitter.com/digimerce_PR

【本件に関するお問い合わせ先】
株式会社デジマース
担当者 : 堀内
TEL  : 03-5449-7922
E-mail : info@digimerce.jp

Pocket

UX(ユーザー・エクスペリエンス)を解釈してみた


ユーザー・エクスペリエンス(以下UX)の概念を解説されても、具体的に日々の業務に何がどう関係していて、どう進めるのか行動に結びつかないものですよね。
また、何とか概念を理解出来ても環境や開発体制、会社の文化などによって導入が難しかったりする場合が多いのではないでしょうか。
厄介ですねぇ。

今回はそんな厄介UXを何とかスマートフォン向けサービス開発に当てはめて都合よく解釈して導入出来ないか考えてみました。


UXってどういうこと?

そもそもUXの目線でサービスを設計するということを大雑把に短く言葉にすると、
ユーザーの需要があり、
ユーザーの目線で提供され、
ユーザーの望むゴールが達成できて、
ユーザーが心地良い!素敵!と感じてまた利用したいと思う設計を、
関わるプロジェクトチームメンバー全員が統一意識で、効率的に精度高くポジティブに開発を進めることと解釈してます。

一番重要なポイントは、
「だれに」向けた「需要」あるサービスなのかを明確に設定することで、この設定次第でサービスの成功が決まるのではないでしょうか。

以上を踏まえて、
「なにを」「いつ」「どこで」「なぜに」「どのように」提供するかを考ることでユーザー体験の設計が行えるはずですが、
ここでUX開発を難しくする環境の問題が出てきます。

実際のサービス開発では、何を売りたいか、どんな手段で提供したいかが、サービス側の事情から既に決まっている状態から企画がスタートすることがあり、その状態ではユーザー目線と需要から起案されることがそもそもないことです。

どんなにUX設計を心がけたとしても、
「ビジネス目線」からスタートした企画には、後付けでUXを適応する事は出来ないと考えておいた方が良いのではないでしょうか。

それでは、UX開発を具体的に設定してみましょう。


チーム内の役割を再認識する

UX設計のフローと、関わるメンバーのスキルについて整理してみます。
フローの内容と、それぞれの担当がプロジェクトに参加するタイミングを表にしてみました↓(注>あくまで弊社環境の場合です)

いかがでしょう?
まだまだ書き込む詳細は残っているので今後も表の最適化を進める予定です。

表のなかで注意が必要なポイントは、
会社やプロジェクトの規模、外部協力会社によって、担当欄一人それぞれの活動範囲に違いはあるところです。

中小規模プロジェクトであれば、幅広い工程を一人で担当することもあり、
大きなプロジェクトであれば、外部の協力会社も入り、各工程を専門スキルに特化した活動を分担して進めることになります。
専門スキルに特化するということは、難易度の高い設計がそれぞれに求められ、広く浅いスキルでは対応できない状況が多いのではないでしょうか。

それでは、ご自身の状況を重ねてみてください。

敢えてネガティブに例えると、
「プランナー」の立ち位置の方はほとんどの工程に関わりますが、
1人で黙々と設計を進めて結果を関係者に共有する流れが多いのではないでしょうか?
専門スキルをもつ各担当者と一緒に具現化作業を進め、多くの機能や仕組みを提案してサービスを充実させていくことが重要なんですが、なかなか責任感が柔軟的方向性を見えにくくします。

逆にプランナー以外のメンバーは、「サービスの製作には協力している…」という他人事意識になりがちな部分…あるのではないでしょうか;
どうしてもどこかで最終的な責任は関係しないという考えが消えずに協調性が不足します。

それぞれの立場が
「私(誰か)の考えたサービス」
の意識が無くならないかぎり、その視点で開発が進むと「UX開発」には到底ならず、
提供者側視点/ビジネス目線の、
マス(大衆)に向けたサービスから脱却はできないと考えられます。

その状態では今の時代の「有効ターゲット」に届かないから、UX設計が必要になってしまっているんですね。

UX設計は先ほどお伝えした通り、
「プロジェクトチーム単位」複数人で進める必然がある以上、
メンバー全員の意識統一が重要なのです。

「私達が考えたサービス!」

…声に出すとなかなか恥ずかしいものですが、割り切って声高らかにポジティブ意識をもってサービスのUX設計を進めてみましょう!

次回も、UXサービス設計の話題をしたいと思います。
以上、サービスデザインに関わっているデジマースのネモトでした。

/////////// 関連記事はこちら↓ ///////////

[必然的な利用シーン]環境/需要との接触


サービスVSユーザー!UIリテラシー格差を考える


あぁ…Flashツールに望みはあるか?


8bitに学ぶUIデザイン


サービス運用中の注意点


データとセグメンテーション


サービス立ち上げとデザイン

Pocket

PhotoShopチュートリアル テキストエフェクト-氷編-

こんにちは、デジマースのはらです。
今回はTOP画像の「氷」エフェクトの制作方法をご紹介していきます!
ステップは簡単10ステップ!! 氷エフェクトはきっと夏でも冬でも使えるはずです。
※制作時間は15~30分ぐらいです。
※PhotoShopのバージョンはCC2017です。
※作業環境はWindowsです。今回はショートカットの紹介は行いません。

●PhotoShop上部メニューバーより/新規→数値を入力→OK

●「レイヤー」パネル下部のアイコンからベタ塗りを選択
ベタの色は何色でもかまいません。今回は♯bcbcbcに設定

●グループ「グループ1」を作成
“その中に”テキストレイヤー(文字サイズ200 px)を作成(入力テキストはひんやりとします)、その後「ひんやり1」と名前を変更
フォントはどのようなものでも構いませんが、太めのフォントがオススメです。

●「ひんやり1」レイヤーをコピーして「ひんやり2」レイヤーを作成
色はそれぞれ
「ひんやり1」 b0e6ff/「ひんやり2」 53d3d1 にします。

●ひんやり1に「ベベルとエンボス」と「光彩(内側)」を適用

A 8ce8ff B 68ddff

●「自動選択ツール」で背景の“余白部分”をクリック
注:テキストをクリックして選択範囲を作成すると仕上がりが悪くなります。

選択範囲が作成されました(“ひんやり”は一発で全ての余白を選択できますが、それ以外の切れ目のない空間のある文字(「あ」や「の」)などは内側も選択してください)

●上部メニューバーから「選択範囲」矢印「選択範囲を反転」を選択

●「グループ1」を選択し、パネル下部「レイヤーマスクを追加」アイコンをクリック

レイヤーマスクが作成されました

●レイヤーマスクを“選択したまま”
上部メニューバーより「フィルター」→「変形」→「波形」を選択

下記赤枠部分を入力+チェック

●「ひんやり1」レイヤーにドロップシャドウを追加
(色は白 ffffff です)

完成!

パッと見たところ味気ないですが、文字のエフェクトはこれで完成です。
詳しい方ならこれ以降の説明は特に不要だとは思いますが、簡単にアレンジ方法をご紹介いたします。

●「ひんやり2」を複製して「ひんやり3」を作成し、レイヤーの描画モードを乗算に変更。その後、「グループ」1の外に出してベタ塗りの一つ上に配置し、色を白に変更

●「グループ1」のレイヤーマスクサムネールにカーソルを合わせ右クリック→「選択範囲とマスクの共通範囲」をクリック。またはcommandキー(win:Ctrl)を押しながらレイヤーマスクサムネールをクリック

●メニューバーから/「選択範囲」→「選択範囲を変更」→「縮小」→縮小量に「1」と入力しOK

●「ひんやり3」を選択し、パネル下部「レイヤーマスクを追加」アイコンをクリック

●「ひんやり3」にレイヤースタイル→「ドロップシャドウ」を適用
(色やサイズはお好みでどうぞ)

●「ひんやり2」レイヤーの不透明度を45%に変更
(不透明度やレイヤーの描画モードを変更することによって雰囲気を調節できます)

●「ひんやり3」レイヤーの下にお好きな背景を配置

完成!

他にも文字の上に雪をのせたり、少し溶かしてみたり、冷気を加筆したり…。様々なアレンジ方法がありますが、全部紹介すると本が書けてしまうのでこれでアレンジ完了としたいと思います。
それではまた次回。

Pocket

アイコンデザイン ―おまけ編―

こんにちは。デザイン業務に関わっております、コンドウです。

みなさん、バレンタインはどうお過ごしでしたか?楽しく過ごせましたでしょうか。
普段買わないちょっと良いチョコや、独創的なチョコを見るのが楽しくて、お店の特設コーナーを見かける度につい立ち寄ってしまいました。

さて、今回のテーマですが、「アイコンデザイン ―おまけ編―」です。
前回私が作成した記事、「アイコンデザイン ―基礎編―」の“おまけ”になっています。そのままです!
アイコンについての考え方など、少しだけ踏み込んだ内容をまとめてみました。

アイコンについて意見が割れてしまった時、そもそもどうして意見が割れてしまうのかな?と悩んでしまった時の1つの気付きにしてもらえると嬉しいです。
私の主観によるところも大きいので、そんな考えもあるのかぁ…と言う参考程度に読んでください。


アイコンの良し悪しは見た人による

アイコンとは、ユーザーや見た人の目的が達成できる、何を表しているのか意味が理解できる物が良いとされています。
確かにそうなのですが、これは見る人それぞれの経験、価値観で差異が生じるものでもあります。

以下では、経験と価値観について事例なども交えながら考えてみたいと思います。


アイコンと経験

経験の例で言うと、「ハンバーガーアイコン」です。
多くのスマホサービスで導入されていて、そのほとんどの場合でタップするとメニューや設定などが一覧で表示されます。
スマホを使い慣れた人にとっては馴染みのあるアイコンですね。アプリを使用していて「あれ?あの機能はどこかな…」と迷ったら、とりあえずハンバーガーアイコンの中を探してみると言う人も多いのではないでしょうか。

一見わかりやすいように思えます。ですが、これはアイコンの形自体が特別に優れている訳ではなく、見る人それぞれの経験に基づいているに過ぎません。
ハンバーガーアイコンは広く普及している為、スマホを触っていれば見る機会は多いです。その為、スマホを積極的に使う人には「ハンバーガーアイコンをタップするとメニューが出てくる」と言う経験がインプットされています。
ですが、初めてこのアイコンを見た時、何を意味しているかすぐにわかった方は少ないのではないでしょうか。経験を重ねることで学習し、今では当たり前の事として捉えられるようになったのです。

スマホに慣れていない人だとハンバーガーアイコンを目にする機会が少ないか、そもそも意識すらしたことがない状態になってしまいます。
経験がない人にとってこの3本線は、それがメニューで、中にどんな機能が隠されているか想像できません。
その為、何か迷いが発生した時の目印が1つもないような状態になってしまうので、咄嗟にどうしたらいいかわからず誰かに訊くか、結局諦めてしまう…なんてことが発生します。

ハンバーガーアイコンに関しては様々な議論が成され、広く普及しているにも関わらず、分かりづらいアイコンだとまで言われている事例もあります。
分かりづらいとされる要因としては、「何の情報があるか想像できない」「優先度の高い情報と低い情報が詰め込まれてゴチャゴチャしている」などがあります。

こんな時は、テキストラベルをつけると問題が緩和されます。アイコンの下に「メニュー」と入れてあげるだけで、3本線だけでは想像できなかった部分を補うことが出来ます。
アイコンの意味を全く知らない人が見ても、メニューと書いてあれば何か情報がまとまっているかも?と言う気づきにしてあげることが出来ます。

余談ですが、私の祖父が最近ガラケーからスマホに買い換えました。経験が一切蓄積されていない状態ですので、もちろんハンバーガーアイコンの意味はまったくわからず…。
設定やヘルプを開きたい時は3本線(ハンバーガーアイコン)をタップすれば良いんだよ、と言うような説明を何回もしました。アイコンの形だけだと機能を想像しづらい為、なかなか覚えられないようでした。
ですが、カメラアイコンはすぐに意味を理解して使いこなしていたので、これは形が明確で馴染のある形だからなんだろうなぁと改めて勉強になりました。


アイコンと価値観

価値観の例で言うと、「お気に入りアイコン」です。
「お気に入りアイコン」の形と言うと、どのような形を思い浮かべますか?星マークやハートマ―クを思い浮かべる人も多いかもしれません。
私が「お気に入りアイコン」に価値観の違いが顕著に表れていると感じたのは、Twitterがお気に入り機能の変更を行った際です。

Twitterには元々、星マークの「お気に入りアイコン」がありました。気に入ったつぶやきがあればお気に入り登録して、プロフィール画面でまとめて見ることが出来る機能です。
それが2015年の11月に、ハートマークの「いいねアイコン」に変更されました。見た目と名前が変わっただけで、機能はお気に入りアイコンだった時と変わりません。
Twitterとしては、より気軽にコミュニケーションツールとして利用してもらいたい狙いがありました。
ツイートしても何も反応が返ってこない事で、意味を見いだせずつまらなくてやめてしまう人が多かった為、利用者同士の交流をより活発にすることで、新規ユーザー獲得や継続率を改善したいと考えていました。

ですが、この変更によりTwitter利用者の意見が分かれました。「元に戻してほしい」「お気に入りといいねは意味が全然違う」など批判的な意見が多かったです。

何故批判的な意見が多かったのか考えてみると、制作者側と利用者の価値観の違いでした。
批判的な利用者の多くは、自分のツイートに反応が返ってくることにそもそも価値を見出していない、ただ呟ける場所が欲しい人。あるいはお気に入りはしたけどその相手とのコミュニケーションを望んでいないなど、そういった価値観を持っている人も多くいました。
その為、コミュニケーションを活性化させる為の「いいね」に対して、ひっそりお気に入りして楽しんでいた人からすると、「お気に入り」より強い意思表示になる、相手へのアピールになってしまうと感じ、嫌だと思う人が多かったのではないでしょうか。

このように、利用者を増やしたい製作者側としては複雑ですが、価値観によっては利用者の目的には沿わず、結局良いアイコンとは言えなくなってしまう場合もあります。
私も未だにお気に入りに戻してくれたらなぁと思う事があります。

コミュニケーションの活性化だけで見れば、「いいね」自体はよい機能なんですが…。
Twitterの場合、変更前と変更後で意味が変わってしまったので、より受け入れ難かったとも言えます。


おわりに

いかがでしたでしょうか?

アイコンの良し悪しは、その人の経験や価値観によって左右されてしまう場面もあります。
そのことを前提に置いて、その影響をなるべく受けないようなデザインを考える必要があります。
考えると言うのはまったく新しい表現を模索すると言う意味ではなく、多くの人に認知され理解してもらえる物を考えると言う事です。

繰り返しにはなりますが、「初めてこのアイコンを見たユーザーは、意味を理解してアクションを起こせるだろうか?」と言う問題提起を常に忘れないようにしましょう。

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

Pocket

手描きスタンプ~byフォトデコレ~

こんにちはもしくはこんばんは!
デザイン業務に関わっております、デジマースのスガです!
早いもので2017年も2月半ばにさしかかろうとしておりますね。

そして寒さも全国的にピークといったところでしょうか。
毎日ブランケットが欠かせません…!

さっそくですが今回は株式会社デジマースが提供しております写真系ツール「フォトデコレ」の手描きスタンプ特集と作成の流れを共に紹介したいと思います。

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

▼手描き素材

人気ですよね!写真を装飾するのにあるととても便利です。
さらっと描いたようなものから細々と書かれた物など様々ありますが手描きの良いところは写真装飾でいう所、メインの写真を主役にしたまま
何気ないワンポイントを加えられる所です!

▼フォトデコレで配信「手描きスタンプ」


スタンプやフレーム等、白黒反転カラーをご用意。(計62点)

実際にこれらのスタンプを使用した図はこちら↓

▼素材はどうやって?

やり方は様々あるかと思いますが、今回作成にあたり使用した物は以下です。
カンタンに流れを紹介します。ものすごくカンタンです。

・ボールペン
・白い紙
・スマホ(撮影用)
・パソコン(編集用)

①【描く】思うがままに白い紙にイラストを描く。
ここではテーマや個数等を決めておいた方が描きやすいですね。


ボールペンだと描き直しが出来ないのが大変ですね笑

②【パソコンへ取り込む】描いたらパソコンに取り込みますが、
今回はスマホで写真を撮ってパソコンに送ります。
スキャンでも大丈夫ですが画像サイズは大きく取り込んだ方が良いですね。

③【整える】取り込んだイラストの背景抜きや必要サイズへのサイズ変更や
色味の調整を行います。あえて調整しないってのも味があるかもしれません。
※調整部分は割愛致します。

④【完成】※一部

最後に

手描きそのままの素材になりますので、システムチックな固いイメージは受けにくいですね。
イラスト自体もラフっぽくなっていますので、自然な感じが写真とマッチします。
そうです、写真に浮かずさりげなく馴染むところが手描きの強みですね!

いかがでしょうか?
装飾が苦手。不器用なんです。問題ございません!
誰でもカンタンに、写真を華やかに出来ちゃいます!
ちょこっと装飾をしたいときに持って来いの手描き素材。
用途によっては写真以外(メッセージ風等)にも使えるかもしれませんね。
興味のある方は是非使用してみて下さいませ!

▼フォトデコレは以下で使用できます。
—————————————————————

★対応OS

ios、Android対応

auスマートパス / スゴ得コンテンツ / 月額300円(税抜)

⇒「フォトデコレ」で検索!

—————————————————————

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

Pocket

今さら聞けない? 有機ELや4KやHDRって何?

スマホや電化製品のスペックを見ると、色々な情報や規格がありますが、内容がわからないものもありますよね。
今回はUI/UXの話ではなく、方向性を変えて最近良く目にする用語について触れていきます。


4Kって?

まずは最近良く目にする用語、
「4K」
からはいります。

「4K」はテレビなどの画面解像度3840×2160のことですが、
現在の家庭用テレビやスマートフォンで代表的な解像度はフルHDの2Kとなります。

2Kはスマホでも使われてる規格で、
2K = 2000の略形(1920x1080 →1920が約2000なので)。

Kはキロ(1000)。

2000なので2Kになります。

まとめると、

2K = 2000の略形 = 1920x1080(1920が約2000なので)
4K = 4000の略形 = 3840x2160(3840が約4000なので)
8K = 8000の略形 = 7680x4320(7680が約8000なので)

です。

…8Kまで紹介してしまいました。

【予備情報】
4K/8K放送については放送フォーマット化が進んでおり、
2018年に放送開始目標となってます。

ちなみに現在「iPhone7Plus」の解像度は
フルHD(2K)の1920x1080ですが、
こちらは5.5インチのディスプレイですので、
いわゆる画素密度のppi(pixel per inch)については401ppiとなります。

人間の目で識別できる、解像度は一般的に350ppi程度と言われてますので(数字が多いほど細かい)、
5インチ前後のスマートフォンについては今以上の解像度(4Kや8K)は必要ないですが、
iPadなどのタブレットについてはまだ現状264ppiですので、
高解像度化の需要はありそうですね。

4Kについてはいかがでしたでしょうか。

続いては「有機EL」について紹介します。

有機ELとは?

「有機EL」については10数年まえから携帯電話にも使用されており、
最近のスマートフォンやApple Watchなどの小型パネルはサムスン社製が使用されています。
現在広く使われている「液晶」とは違うディスプレイ規格の一つです。

2017年は日本での家庭用の大型有機ELテレビ元年となり、
大型パネルはLG社製をつかって、3月から各社がついに本格的な製品化を開始します。
(60万円~90万のようです…マニア向けです;)
※注意)現在の4K発売/予定されている製品では別途チューナーやアンテナが必要とのこと;(もう少し待ちましょう)

液晶との違いについては、

・液晶ディスプレイよりも高コントラスト

・液晶→バックライトで背面から照らすので、黒がグレーっぽくなってしまう
 有機EL→画素が自発光するのでバックライトいらず→美しい真の黒の再現

・画素の輝度変化が瞬時に可能なため動画に強く残像感が少ない。
  ※テレビ放送のテロップがスクロールする場合、動画性能が低い液晶テレビですと動画残像により文字がボケてしまって読みにくいアレです。

有機ELは特性上、動きが早い映像についても、
シャープな輪郭を維持しやすいので、特にスポーツ中継やゲームに適しています。

ここから少し寄り道します。

人間の動画識別能力の仕組み

私たちの目はどのように連続する映像と映像を見ているのでしょうか。

私たちが見ている風景などの世界は、
自身の脳が都合よく補正した映像のようです。
アナタと私で見えてるものに差異がある可能性があるなんて怖いですね…。

動きのある映像はどう作り出しているかというと、
静止画と、ほんの少し時間の経過した静止画をパラパラ漫画のように、
情報として脳内に取り込んでいるので、
本来はチラチラ途切れた繋がりに欠けた動画のような映像になるはずなのです。

しかし!
厄介なのか救いなのか、
静止映像は脳内に、光の情報として取り入れられる際、
その光の強さに応じて、なんと「残像効果」が起こるそうです。

経験あると思いますが、
蛍光灯の光を直接見た時、太陽を直接みてしまったとき、強烈な映像を見てしまったとき、
あの目蓋(まぶた)に焼き付くヤツが過度の残像効果の現象です。

私たちの脳は、
静止画と静止画の間に「残像効果による中間映像フレーム」が自動生成されているので、
うまいこと繋ぎ合わされ、動きのある映像を滑らかに感じることが出来ているのです。

そう考えると、
残像効果がなくなったら毎日の生活がストレスですね…考えたくもない。

話を戻して有機ELの話

有機ELは、液晶テレビと同じで今後驚くスピードで製品の改善が進んでいく見込みです。
現在の課題はディスプレイの寿命の短さなどが話題に上がりますが、
2~4年サイクルで買い替えが発生するスマートフォンでは大きな問題にならないでしょう。
Appleも時期iPhoneの商品ラインナップに組み込んでいく話も出ております。

鮮やかな発色と引き締まった黒。

搭載が待ち遠しいです。

最後に”HDR”の話

「HDR(high dynamic range )」も最近TVやゲーム機、映像ソフトで話題沸騰なので、
耳にする機会が多いのではないでしょうか。

写真をやる方は”写真のHDR機能”の認識の方が強いと思われますが、
あちらは言わゆる画像補正で、
夕焼けや夜景など、「白とび」「黒つぶれ」になりがちな「絵」に補正をかけて、被写体全体が均等に映るようにする技術ですが、映像のHDRは違います。

映像のHDRは、表現の段階を、現在の映像規格よりも拡大して、
より繊細にした新しい映像規格となります。

地味ですがワクワクしませんか?…しないですか;

暗い映像でも、暗いなりに多くの情報が確認でき、
光度/輝度を高く設定できる製品が出てくれば、
白とびがなく、
眩しい程の明部とコントラスト高い暗部が表現できるようです。

しかしながら、現実の家庭向け製品では、
眩しいと感じるだけの明るさを画面から放つには、
それ相応の電力の消費が必要となるので、
蛍光灯並みの明るさは難しいところがありますが、
よりきめ細かい表現力に可能になることに違いありませんね。

次回は、UI/UXとサービス設計の妄想に戻りたいと思います。
以上、デジマースのネモトでした。

Pocket

検索について

こんにちは。今回のブログ更新担当のデジマースのはらです。

皆さんはアプリやwebサイトで欲しい商品や見たいコンテンツなどがある時、どのようにして探しますか?「新着」ページや「人気」ページ、あるいは「おすすめ」などから探しますか?
最近流行している商品などは、大抵どのサービスでも目につくように紹介されているので、上記の方法ですぐに見つかるかもしれません。
しかし少し古い商品、あるいはマニアックなコンテンツなどはすぐには見つかりません。そんな時、皆さんはサイト内で何をしますか? おそらく「検索」を行いますよね? 虫眼鏡のアイコンやテキストフィールドを探しますよね?
と、いうことで今回は「検索」について紹介していきたいと思います。

代表的な検索方法は?

代表的な検索方法は2つ、「キーワード検索」と「カテゴリ検索」があります。今回は見せ方や関連の機能も合わせて解説して行きたいと思います。


1.キーワード検索

読んで字のごとく、入力されたキーワードを基に情報を検索する方法です。キーワード検索は意外に難しく、慣れている人は多いのですが、普段アプリやwebを使わない方には高度で、本当に必要な情報を引き出す言葉を見つけるには慣れが必要です(慣れていても検索ワードを絞る事は難しい時があります)。少しでも検索を簡単にするためには、ローマ字・ひらがな・カタカナなど、どの入力方法でも検索できたり、検索候補の表示(サジェスト表示)されることが望ましいです。

検索ボックスの位置
商品やコンテンツの多いECサイトでは、サイトTOPに検索ボックスを配置することが望ましいです。なぜかと言いますと、「これが欲しい」と目的を持ったユーザーは、まずはじめに目当てのものを探すからです。その際に検索機能がサイト下部やメニューの奥に隠れていると、使用するたびにストレスになってしまいます。ですので特別な理由がない限りフッターや本文への検索ボックスの配置は避けたほうが良いです。(検索結果に情報が引っかからなかった場合のために検索ボックスをフッターに配置する事は問題はありません)
TOPに検索ボックスがあれば、慣れているユーザーには自然で使いやすくなります。また、不慣れなユーザーにとっては見つけやすい位置となります。

検索ボックスのデザイン
キーワード検索は通常テキストフィールドとボタンで構成されています。検索ボックスのデザインは、視認性が高い事が重要で、特にテキストフィールドの視認性が悪くならないように気を付けてデザインすることが重要です。検索開始を決定するボタンには「検索」「GO」「SEARCH」「虫眼鏡アイコン」などの文字・アイコンが一般的に使用されています。また、検索ボックス内にボタンの要素は含めず変わりにキーボードの決定ボタンで検索を開始するパターンもあります。


2.カテゴリー検索

カテゴリ検索は「バラエティ」「スポーツ」「ファッション」などに分けてまとめられた情報を、目的の情報まで選択して辿っていく検索方法です。ユーザーがキーワードを考えたり文字入力をする必要が無いため、分かりやすくカテゴリ分けされていれば、効率よく目的の情報までたどり着けます。カテゴリの分かりづらいものが多い場合に使用するとかえって使いにくくなってしまいます。

カテゴリ検索のデザイン
カテゴリ検索の見せ方や仕組みはサービスによって大きく変わってきます。シンプルなカテゴリ検索の場合、カテゴリの大項目にアイコンを使用したり、文字のサイズを変えてメリハリをつけるとより直感的に伝わり、使いやすくなります。

関連機能
カテゴリ検索時に、カテゴリ内の検索数を表示する機能を「ファセットカウント」と呼びます(例1)。これによりユーザーは求めているカテゴリの検索結果をページ遷移を行うことなく確認する事ができます。他には、検索時に「価格、色、サイズ、性別、機能」などの複数の条件を指定して結果を絞り込む「絞り込み機能(例2)」があります(そのままの呼び方ですね…)。

 


検索は便利です。しかし、めんどくさい作業です。検索機能は「手間が少なく正確で、目的のものに最短でたどり着ける」という事が重要です。位置や仕組を工夫して使ってもらえる検索機能にしていく事が大切です。また、検索機能の改善はすぐに大きな成果につながるわけではないのですが、こうしたユーザビリティの改善がサービスの印象を変えます。検索機能を実装しているサービスがある以上、実装していないと「こんな機能もないのか…」思われてしまうかもしれません。

Pocket

アイコンデザイン ―基礎編―

こんにちは。デザイン業務に関わっております、デジマースのコンドウです。

みなさんのお住まいの地域は、雪は降りましたでしょうか?
私の地元は冬でもほとんど雪の降らない地域なので、雪と聞いただけでワクワクしてしまいました!

さて、今回のテーマですが、「アイコンデザイン ―基礎編―」についてです。
アイコンを使いたい!作りたい!でもどんなデザインが良いのかわからない…、意見が割れてしまって決まらない…。
そんな時のために、そもそも良いアイコンとは何か?を初心に返ってまとめてみました。

ここで言うアイコンとは、「アクションを直感的に伝える為の記号」を指します。
アプリやWEBサイトで、「物事を簡単な絵柄で記号化して表現(https://ja.wikipedia.org/wiki/アイコン)」した物です。

例えば、皆さんは下記の図のような状況で「○○を調べたいな…」と思った時どうしますか?

「虫眼鏡マーク」をタップする、と言う方が多いのではないでしょうか。
虫眼鏡マークは「調べる・検索」の意味を持つモチーフとして一般的ですので、直感的に「このアイコンを選択すれば調べられるな…」と想像できたかと思います。

このように、アイコンは出来る事や意味が記号として視覚的に表現されているので、ユーザーに直感的に何が出来るのか理解してもらう事が出来ます。


アイコンのメリットとデメリット

メリットは、記号として視覚的に表現されている事で、ユーザーに直感的に概要を理解してもらう事が出来ます。
また、機能の説明が多くなってしまったり文章が長くなってしまう場合に、アイコン化することで親近感のある見やすいデザインが出来ます。
これらによりUIの最適化に繋げることが出来ます。

デメリットは、ユーザーにとって親近感のないモチーフや認識しづらい形状だと、意味が伝わらず機能を理解してもらえません。
アイコンにしたことで余計にわかりづらいと言う、本末転倒な結果になってしまっては困りますね…。


良いアイコンとは?

アイコンは、「○○したい!」というユーザーの目的が達成出来るように誘導してあげなければなりません。
その為に気をつけたい事は、大きく分けて3つです。

1)親しみやすい形

多くの人に意味を理解してもらえる形にしましょう。
一般に広く普及しているアイコンなど、ユーザーにとって見慣れたアイコン・モチーフである程わかりやすいです。
デザインに情熱を注ぐあまり、またはクライアントからの要望で、凡庸から外れた独創的な物を求められるかもしれません。
ですが、そうして出来た物はアートの観点から見れば素晴らしいかもしれませんが、UIデザインとしては適切でないこともあります。
ユーザーはアートを見て感動したいのではなく、目的を達成する事を最優先に考えているはずです。

2)シンプルに

必要最小限に簡略化しましょう。
アイコンは小さく表示されるので、明確で何の形か認識しやすく、覚えやすい物がよいです。
装飾過多だと視認性が悪いだけでなく、画面全体のUIに悪影響を及ぼしてしまう事もあります。

3)テキストラベルをつける

サポートとしてテキストラベルをつけることも考慮しましょう。
全ての人がアイコンだけを見て、それぞれの意味を正確に理解することは難しいです。
もしユーザーがアイコンのみの表示で理解できなかった時、目的を達成するまで1つ1つ自分で確認してねとまかせてしまっては快適とは言えませんよね。
「わかりづらいな…」と使ってもらえなくなってしまいます。
テキストラベルをつけることで、ユーザーの想像する行程を省略し、統一された正確な意味を伝えることが出来ます。


おわりに

いかがでしたでしょうか?

今回はアイコンデザイン基礎編と言うことで、初心に返って考えてみました。
「初めてこのアイコンを見たユーザーは、意味を理解してアクションを起こせるだろうか?」と言う問題提起を常に忘れないようにしましょう。

それではまた!コンドウでした。

Pocket

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

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

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

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

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


①メニューを開く

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

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

②ボタンタップ

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

③ログインの遷移

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

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

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

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


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

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

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

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

Pocket