初心者OK ファイルサイズを小さくしたい!~PNG・GIF・JPEG編~

さてさて作成したデータが完成した後にあまりにも容量が大きすぎて困ったことはないですか?
ex.メールで送れない…、ファイル数多い上にデータ重いとか…

私は困りますね!(キッパリ)
というのは、もちろん受け取る側でも、送る側でも、個人で保存に至っても出来る限り容量は軽い方が良いですよね。
通信時間かかるし…、メモリー食うし…

まぁ…作成する内容によってはどうしても容量を下げられない時もありますがそれはそれとて、今回は、そういうものを除いた、「PNG・GIF・JPEG」ファイルの容量をパソコンで下げる方法を書きたいと思います。

※※完全に個人の主観が入っております故ご了承くださいませ※※

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

▼ラインナップ

・PNGファイルの場合
・GIFファイルの場合
・JPEGファイルの場合
※動作Windows/Photoshop CC/Fireworks CS6
※それ以前のソフトでは見え方が違う場合もあるかもしれませんが、流れとしては変わりません。

▼PNG形式ファイルの場合

WEB用にバナーの画像を作成しました。

プロパティなどで容量を確認してみると、「83.5KB」ありました。
まずはファイルサイズがこれ以上小さくできるか簡単に確認してみましょう。

①確認したい画像を開き、下記のファイルから項目を選びます。

②PhotoshopもFireworksも「PNG24またはPNG32」になっていたら「PNG8」を選択して保存!
PNG8にすることで色数は減りますが、グラデーションを沢山使用している等の余程の事が無い限り見た目は変わらないと思います。

容量削減完了。


▼GIF形式ファイルの場合

WEB用にアイコンの画像を作成しました。

プロパティなどで容量を確認してみると、「14.1KB」ありました。
減色を行い、容量を軽くしてみましょう。


①確認したい画像を開き、下記のファイルから項目を選びます。

容量削減完了。

▼JPEG形式ファイルの場合

使用したい写真を用意しました。
容量が大きいが、サイズは変えずにイメージが変わらない程度に容量を下げたい。

プロパティなどで容量を確認してみると、「2MB」ありました。
減色を行い、容量を軽くしてみましょう。

①減色したい画像を開き、下記のファイルから項目を選びます。

②割愛してますが、プレビューも出ていると思いますので、変化を見ながら減色することをお勧めします。

容量削減完了。

▼最後に

簡単に容量を下げられる簡単なやり方をご紹介させて頂きました。
まだまだカラーロックしたりと様々な方法がありますが、今回は初心者OKな内容ですので割愛しています。
知ってるよ!な内容かもしれませんが;少しでも参考になれば幸いです。

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

Pocket

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

あなたが関わっているサービスの、UX設計上の「利用シーン」はどんな状況でしょう。

「テレビで聴いた楽曲を購入したくなったとき」など唐突にサービスを使用している場面が多いと思われますが、
初めてサービスに接触する「その時」の環境と需要を意識出来ていることが重要です。

と、さすがにこんな具体性なく都合よくあなたの関わるサービスを見つけ使ってくれる状況は、そこまでに至る過程を省きすぎだと理解いただけるとは思います。

「何に困っているのか」「何を欲しているのか」「どう接触してきたのか」
という利用者の抱える問題を踏まえた「必然的な利用シーン」がある上でサービスのUX設計をしていく必要があります。

今回は、
「ペルソナ設定/行動シナリオ」の設計フェイズでも方向性がぶれないように
開発起案段階での「環境」「需要」などの「接触要素」と過程の理解を考えてみます。


環境ありきの「接触」

サービスと利用者が「接触」できる環境(状況)を正しく認識するために「ターゲット」を知る必要があります。

近年、マス(大衆/集団)だけでセグメントをすることは適切でなくなり、
「何」に関心があり何に関心が無いのか、
また、どういった移動手段をつかうのか、どういった趣向をもっているのかという、「心理的変数」「行動変数」など動向別にセグメントすることが有効になってきました。

「心理的変数」
・価値観、ライフスタイル、性格、好み、将来の希望

「行動変数」
・利用方法/手段、購買意欲、購買履歴、商品への忠誠/親密度(ロイヤルティー)

上記のワードを常に意識してサービス起案の方向性を決めていれば、
提供者視点を避けられそうです。

つまり、
人々の考え方を神のように常に把握していれば「究極マーケッター」に成れそうですが、現実は難しいので仮説の元、細々と都度データで確証を得てターゲットの行動を理解していくしかないようです。
地味な作業がやっぱり大事なんですね。

ターゲットの行動が見えてくると、どのような環境下でサービスとの「接触」が行われるかが見えてきますので、
初めてサービスに接触するその時の「利用シーン」の具体的な過程がわかってくるのではないでしょうか。

下記は、
状況によって「起こり得る/起こり得ない接触」「環境」の例です↓


「隠れた需要」との接触

「需要」を考える場合、ユーザーから直接聞くことが適切と思われますが、
その「聞き出した需要」はそのままでは必ずしも適切ではない場合が多いようです。

私たちが世の需要を掴みにくい状況は、「利用者側が発する声」にも表れ、
本人も本質が見えていないため、例えば、必要だと思って買った商品が結局使われないまま埃をかぶることは良くあることです。

その時の状況を思い返すと、
単純にタイムセールの商品で限定感で買ってしまったり、
モデルやタレントへの憧れから同じ洋服を買ってしまっていたり、
忠誠心/信仰心から、同じ系統(系譜)の商品を惰性で買っていたりと、
つまり「間接的な要因による需要」があることを認めざるを得ないわけです。
よって、「利用者の声」には「本当の需要」が隠されています。
一度寝かせて落ち着いたタイミングで、広い視点で分析、有効活用していきましょう。

必然的な利用シーン

以上を踏まえて、改めて冒頭の利用シーンを考えてみると、下記のような行動をする利用者も設定できるのではないでしょうか(あくまで手段の一つ)。

上記は今回の説明のために極端にセグメントをして必然性を上げているので母数は限られますが、
具合的な接触ポイントの必要性を理解いただけるのではないでしょうか。

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

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

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


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


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


8bitに学ぶUIデザイン


サービス運用中の注意点


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


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

Pocket

簡単! ゆるゆるイラストチュートリアル①[Illustrator線画編]

こんにちは!第30回ブログ更新担当のはらです!
今回はデザイン業務や資料制作の際に「フリー素材で欲しい素材が見つからなかった…」「オリジナリティを重視した素材が欲しい!」という場合に使える簡単イラスト制作方法をご紹介いたします。イラストのテーマは「ゆるめ」です。
また、今回はスペシャルゲストと一緒に紹介していきます。
※IllustratorCC 2017を使用しています。

それでは早速ですが、本日のゲスト…「イラストちゃん」さんです!パチパチ

………………はいっ。 よろしくお願いします。
イラストちゃんにイラストを紹介してもらう前に、簡単にイラストについて質問をしてもよろしいでしょうか?

印刷物やWEB、資料などに入れるイラストにはどのような効果がありますか?

もっとわかりやすくお願いします。

なるほど、普段何気なく見ているイラストにはそんな効果があったのですね。
イラスト制作の技術があればデザイン業務や資料制作に役立ちそうです!ますます制作方法を知りたくなりました。
それでは紹介をお願いします。

1. 新規ドキュメントの作成
Illustrator上部メニューバーより「ファイル」→「新規」を選択。画像を参考に数値入力(ドキュメントサイズやカラーモードは使用用途に合わせて変更を行ってください。)

2. ブラシの設定を行います
Illustrator上部メニューバーより「ウィンドウ」→「ブラシライブラリ」→「アート」→「アート_カリグラフィ」を選択

3. カリグラフィパネルが開くので「5pt楕円」を選択

4. ツールから「ブラシツール」を選択

5. 作画
(作画中、少し気に入らない部分があっても気にせず進めてください、修正は描画後まとめて行います)

6. ツールから「ダイレクト選択ツール」を選択。

7. ダイレクト選択ツールでパスを修正し、線画完成
(線幅が気にいらない場合は上部メニューバーより「ウィンドウ」→「線」を選択し、線パネルから線幅を調節してください)

あ…二回に分けるんですね。

わかりました!お忙しい中ありがとうございました。
と言う事でまた次回、簡単! ゆるゆるイラストチュートリアル②[Photoshop着色編]でお会いしましょう!

Pocket

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

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

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

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

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

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


文字を「組む」とは?

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


おわりに

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

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

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

Pocket

*簡単!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