画像：pixabay

「スマホアプリの課金で売り上げを上げたい」と思っている方は多いかもしれません。
元記事では、DropboxやEvernote・マネーフォワードなどサブスクリプションモデルのスマホアプリでの課金UIについて、UIパターン・規約表示パターン、サービスパターンに分けてそれぞれ良い点、悪い点などをまとめています。

最後のまとめのところに書かれていますが、サブスクで売り上げを伸ばすためにはUI以外にも考えることはたくさんあります。
サイトで申し込みページなどのデザインをするとき同様に、サブスクUIを検討するときには、サービスとユーザー心理を考えてUIデザインすることが大切ですね。分かりやすい記事で個人的に勉強になりました。

課金 UI まとめてみた。｜あき / UIUX デザイナー｜note

画像：pixabay

私はデザインが苦手です。
ちょっとした画像などを作っても、どこをどう直したらいい感じにしっくりとくるのかが分からず、あれこれと悩んで時間がかかってしまいます。
そして最終的なできあがりも「やっぱりセンスないなぁ…」と悲しくなってしまうことが多々あります。

元記事では、「デザインがしっくりこないときにとりあえず試したい10の簡単な方法」がまとめられています。
以下に10個の方法を引用します。

• 1. トリミングを調整してみる
• 2. 大小差をつけてみる
• 3. 被せてみる（レイヤー感を出す）
• 4. 色数を減らしてみる
• 5. コントラストをつけてみる
• 6. 補色を使ってみる
• 7. フォントを変えてみる
• 8. あしらいをプラスしてみる
• 9. 質感をプラスしてみる
• 10. 写真のレタッチを変えてみる

デザインをたったひと手間で魅力的に変わるかもしれない、と言われると、デザインに自信がないワタクシ、この記事をストックしておいて試してみようと思っています。

デザインがしっくりこないときに試すこと10選【新米デザイナー向け】 | 東京上野のWeb制作会社LIG

画像：ac-illust.com

PV数が250万を超える。ウェブ担当者のみなさまであればおわかりになるかと思いますが、企業が運営しているサイトでも250万PVを達成するのは簡単なことではありません。それを個人が運営するメディアが達成したのですから、その凄さは言わずもがな。

サルワカの運営者がメディアを成長させるために行ったのは、徹底したユーザー目線でサイトを作り込むこと。
サイトのデザインにはじまり記事の構成、執筆の仕方、そのどれもがユーザー目線を軸に考え込まれています。

記事を書くときには「全部読んでもらえると思うな」。

この言葉こそまさにユーザー目線を徹底している証。記事を書く側としては詳細にわかりやすく解説してあげたいという思いが働きがちですが、実際にはサイト訪問者はすぐにわかる情報を欲しています。そのため細かすぎる記事だと反対に敬遠されてしまうことにも繋がります。

わかりやさ＝細かく詳細が書かれているわけではない。ということですね。

デザインやウェブ制作を中心に生活に役立つ知恵や小ネタまで、なんでもわかりやすく解説してくれるサルワカには、ウェブの担当者でなくてもついつい読みたくなる仕掛けが、たくさん盛り込まれていることがわかります。

サルワカという個人メディアを250万PV/月にまで育てた方法｜CatNose｜note

画像：pixabay

ディープラーニングを活用してさまざまな業界を変えていくABEJA。
2018年に入ってコーポレートロゴを刷新しました。

サイトもリニューアルしており、ここに至った経緯とブランディングプロジェクトについてABEJA Arts Blogでまとめられています。細かい内容も書かれており、考え方の参考になります。
中でも個人的に勉強になったことは以下の部分です。引用します。

ブランディングは、企業が自らに向き合い、内なる「軸」を明らかにすること。それは「ABEJA」という人格のことであり、そこから所作や語り口などが決まっていきます。
一方のマーケティングは、外に目を向けて、他者からどう思われたいか、どう差別化し選ばれるかを定義して活動することです。

これらの違いを意識しながら、前述の目的を達成するべくブランドの言語化とビジュアライズを進めていきました。

なんとなくフワッと語られがちなこの部分ですが、プロジェクト内で明確化することは大切だと改めて感じました。

ABEJAリブランディングのデザインプロセス – ABEJA Arts Blog

この記事では、昨秋発表になったAdobe製品の最新情報についてご紹介します。普段みなさんが使っているアプリは、たとえばPhotoshopやIllustratorなど、ごく一部かもしれません（現に筆者もすべてのアプリを使っているわけではありません）。しかしながら、Adobe社に代表されるアプリベンダーの動向を追うことは、私たち制作がこれからどうクリエイティブの進化と向き合っていくのかを考える上でも意義のあることです。

Adobe最新アップデートからクリエイターの未来を占う

前半では（１）生まれ変わった Adobe Lightroom CC、（２）Dimension CCの登場について説明いたしました。

（３）ついに正式リリース Adobe XD

Web制作者として最も大きなトピックは、ついに正式版リリースとして本格始動した「XD」の発表でした。

新しいWebサイトやアプリを制作する方には、非常に力強い味方になることでしょう。このXDをご存知のない方は、まずはこちらをご覧ください。こちらは、スマートフォンで閲覧すことを想定したダミーサイトです。

AdobeXD:プロトタイプ埋め込みデータ

クリック（タップ）すると、次のページへ遷移することがわかると思います。XDでは、「プロトタイプビュー」というモードを使って、ページやオブジェクト単位でのリンクを直感的に設定できます。

こういった動きや画面遷移については、従来はコーディングをしないと実現不可能でしたが、XDをはじめとしたプロトタイピングツールの出現により、ここ数年は特に、「使ってみながら改修していく」という、アジャイル型の開発手法に注目が集まっています。

ディレクター、デザイナー、エンジニアが協業するためには、コミュニケーションのためのツールが欠かせません。XDは積極的にアップデートされており、たとえばWeb制作におけるコミュニケーションツールのひとつとなり得る「デザインスペック」と呼ばれる機能を公開しています。

「デザインスペック」では、コード化に必要な情報（カラーやテキスト、オブジェクト同士の距離など）が集約されているURLを発行できるため、Web制作に必要な仕様を書き出すことなくエンジニアに情報を渡すことができます。

xd.adobe.com/spec/f8082b54-7ab3-489a-bba3-02a766555f79
AdobeIDをお持ちの方は、上記URLへアクセスの上、ログインしてみてください。

アプリの習得コストが非常に低いのもXDの特徴です。IllustratorやPhotoshopよりもツールが絞られており、初心者の方にも扱いやすいと感じます。PowerPointを扱えるレベルのリテラシーの方であれば、基本的なワイヤーフレーム程度ならすぐに作成できることでしょう。

URLベースだけではなく、もちろんpdfや各種画像フォーマットにも対応しているので、これまでの仕事上のコミュニケーションを損なうことなく、さらに柔軟なやり取りを模索できます。ご自分がデザインされない方であっても、外注の方へ指示を出す際などに使用してみてください。

“Adobe Sensei”はどこにいる？

2017年はAIがもてはやされた年でした。第三次AIブームと言われる背景には、データの取得が安易になったこと（ビッグデータ）が指摘されています。インターネットで繋がったCreativeCloudはまさにビッグデータを活用するにふさわしい舞台だと言えるでしょう。

そのAdobe社のAIこそ、”Adobe Sensei”なのですが、特定のアプリとしてわかりやすく私たちの目の前にあるわけではありません。

そのため、Adobe Senseiの恩恵を強く実感する機会が少ないのかもしれない、というのが筆者の実感です。

しかしながら、同時に「いつの間にか便利になっている」というアップデートが多いのも事実。先日のPhotoshopに搭載された「被写体を選択」という機能も、単純なピクセル同士の色情報の差分だけではなく、Adobe Senseiが被写体を解釈・解析した結果なのだそうです。
また、AdobeStockの類似画像を検索は、抽象的な色・形のイメージを探し出すのに絶大な効力を発揮します。

（詳しい手順などは著者が一昨年公開した記事Photoshopユーザーが使って感じたCCのお役立ち機能をご紹介！2017リリースはどう進化した？を御覧ください。）

ボイスアシストや自動運転など、AIの活用で私たちの生活は便利になりつつあります。一方で、AIが私たちの仕事を奪うのではないかという危惧があることもまた事実です。

しかしながら、Adobe社のAIに対する考え方は、”AIはクリエイターのクリエイティビティを広げていく”というもの。あくまで主役は我々クリエイターなのです。クリエイティビティに関係の無い部分、たとえば先程あげた選択範囲の作成や、画像の検索など、繰り返しのつまらない作業はAIにゆだね、人間にしかできない本来の仕事にしっかり集中すべきだと、Adobe Senseiは諭してくれているのかもしれません。

この記事では、昨秋発表になったAdobe製品の最新情報についてご紹介します。普段みなさんが使っているアプリは、たとえばPhotoshopやIllustratorなど、ごく一部かもしれません（現に筆者もすべてのアプリを使っているわけではありません）。しかしながら、Adobe社に代表されるアプリベンダーの動向を追うことは、私たち制作がこれからどうクリエイティブの進化と向き合っていくのかを考える上でも意義のあることです。

Adobe最新アップデートからクリエイターの未来を占う

2017年秋のAdobeのアップデートは「全方位アップデート」をコンセプトに、Creative Cloudの主要なアプリケーションがほとんどアップデートされたことで話題となりました。その中から新登場を遂げた3つのアプリについてご紹介しましょう。

▼Adobe MAX 2017: Day 1 General Session
youtu.be/E_l1rQHHpjc

（１）生まれ変わった Adobe Lightroom CC

Lightroom（ライトルーム）という写真管理・現像アプリをご存知でしょうか？10年以上の歴史があるので、活用している方も多く、写真を扱う方に人気の高い製品なのですが、昨秋のアップデートで「Lightroom CC」が”誕生”しました。10年以上の歴史があるのに、”誕生”？と思われるかもしれません。

▼Lightroom CC
www.adobe.com/jp/products/photoshop-lightroom.html

実はこの「Lightroom CC」は従来製品のアップデートではなく、ゼロから開発された「まったく新しいLightroom」なのです。

もっとも注目すべきは、クラウドベースでの管理が可能でオンライン連携が可能である、という点です。「Lightroom CC」はPCはもちろん、手元のデバイスでも閲覧が可能です。AdobeIDでクラウド管理されている写真をさまざまなデバイスで呼び出したり、保存したりすることが可能になります。

LightroomCCの単体プランには、なんと1TBのストレージがついています。膨大になりがちな写真データの管理やバックアップにも最適ですね。

また、こうした写真の管理には話題のAdobe Senseiを活用した自動タグ付け機能が活躍します（現状はまだ日本語への対応が不十分な部分もありますが）。テーマごとにアルバムを作ることなどには非常に役立つでしょう。

このアプリからは、クリエイティブは今後デバイスの壁を越えて、シームレスになっていくという「未来」が読み取れます。誰でも・どこでも写真を撮影できるようになった今日、その写真のクリエイティブも、PCで椅子に座ってじっくり行うとは限りません。より手軽に、より早く、よりキレイに仕上げるためのテクノロジーが、この「Lightroom CC」には詰まっているのです。

従来の Lightroomは、「Lightroom Classic CC」という名称になりました。今秋以降のアップデートでは、ハイアマチュア?プロが愛用するアプリとして、より精細なチューニングがなされています。

▼Lightroom CCとLightroom Classic CCの機能比較
www.adobe.com/jp/products/photoshop-lightroom-classic/lightroom-cc-vs-lightroom-classic.html

（２）Dimension CCの登場

Dimension（ディメンション）CCというアプリが初登場しました。2016年のAdobe MAX 2016で「Project Felix」として発表されたアプリですが、「Dimension」と名称を変えての正式リリースとなりました。
Dimension CCは、平面を専門とするグラフィックデザイナーでも、3Dモデルを簡単に扱え、製品モックアップのイメージを手軽に作ることが可能なアプリです。

イチからモデリングする必要はありません。

ここでは、コスメのチューブのモデルを作ってみましょう。DimensionCCを起動した上で、素材のサービスサイトであるAdobeStockから「3D」を選び、”tube”や”Bottle”と検索すると、イメージに近いモデルがすぐに見つかります。

しかし、色などは当然違いますので、ダウンロードして、色を変更します。
DimensionCCでは、色や、光沢感（たとえば、テカリのあるツルツルな肌理なのか、マットな風合いなのか）などを簡単に変更可能です。ベースの色と形を決めたら、PhotoshopやIllustratorで作ったロゴやイメージをCreative Cloudライブラリに登録しておいて、ドラッグ＆ドロップで適用します。

作った3Dデータのpsd化なども簡単に可能です。

Web担当者の皆さんの中には、こういったプロダクト系のお仕事を任されている方もいらっしゃると思います（筆者はWeb担時代そうでした…）。プロダクト系の入稿用データは、あらかじめ着色してある容器に対してロゴ部分だけを印刷するケースが多く、実際の商品イメージと入稿データの見た目がかけ離れている場合も多くあります。そのような場合にこういったアプリがあれば、実際の見た目を簡単にシミュレートできるので、上司やクライアントとのコミュニケーションが取りやすいですね。

3D系のアプリは動作が遅い部分もあり、Dimension CCも例外ではありません。そういった点に関しては今後のアップデートに期待したいところです。

画像：pixabay

ページ表示速度が重要視されています。

元記事では、ヤフオク!アプリ開発部の方がデザイナーの立場からサービスを「サクサク動かす」ためにデザインする手法を挙げています。

計測値として数字で表れる「表示速度」に目が行きがちですが、「サクサク動く」と人が感じる速度を分解するともうひとつの要素として「体感速度」があります。

「体感速度」は数値で表れるモノではなく、人の年齢や心理状態、場所によっても変わりますし、「読み込まれた」と認識するタイミングも人によって異なります。
この「体感速度」をあげるためにデザイナーとして考えられる手法が6つ挙げられています。

以下に引用します。

1.　コンテンツを読み込むタイミングをずらす
2.　完了していないタスクを完了したと見せかける
3.　アニメーションを正しく使う
4.　軌道を予測する
5.　ミニゲーム
6.　ローディングを適切に設定する

サクサク感をデザインする – Yahoo! JAPAN Tech Blog

画像：イラストAC

日本人男性の約20人に1人、日本人女性の約500人に1人が色弱（赤緑色弱）と言われているそうです。
色弱の方は、一部の色の組み合わせに対して色の感じ方が違います。

カラーユニバーサルデザインとは、色の感じ方の違いで得られる情報に差が出ないよう、すべての人に情報が正確に伝わるユニバーサルデザインのことを言います。
サイトデザインをするときの色選び、カラーユニバーサルデザインを意識していますか？

記事では、視覚障害とはどのようなものなのか、またサイトデザインの色使いで気にした方がいいことは何か、についてまとめられています。
たとえば、グラフや図で色を変えて説明をしているとき、色覚異常の方は文章での説明がなければそのグラフが何を表しているのか、正しい情報が得られていないかもしれません。

また、ユニバーサルデザインの対応が進んでいる鳥取県のサイトでは、「カラーユニバーサルデザインガイドブック」がPDFでダウンロードできます。推奨の配色カラーやチェックリストもあり参考になります。

すべての人に伝わるサイトづくり、コンテンツだけじゃなくデザイン面も考えておきたいですね。

視覚障害を意識したWebサイトを作るためのポイント | UX MILK

「Web・アプリとカラーユニバーサルデザイン」 – 勉強会メモ – Qiita

カラーユニバーサルデザインの推進/人権施策/とりネット/鳥取県公式サイト

画像：Pixabay

ウェブ担当者が、チラシやパンフレットを発注したときに…

• なんだか写真がくすんでる
• 画像が粗くて汚い
• ロゴがぼんやりしている

仕上がりにガッカリしたことはありませんか？
モニターに映る画像と、印刷された画像、同じように見えても違うデータなのです。

なんだか写真がくすんでる

モニターではキレイな青空の写真が、印刷ではちょっとにごって見える。
もっと明るくできませんか？

専門のオペレーターのいる印刷屋さんでは対応してもらえるかもしれません。
しかし、自分で調整するには知識が足りないと思います。
あきらめてください（笑）。

よほど鮮やかな明るい色でなければ、大きく変わることはないので、こだわらなくても大丈夫です。

そもそも、モニターと紙では発色の仕方が違います。

モニター：光の三原色「RGB」

モニターの画像は「RGB」、赤 (Red)＋緑 (Green) ＋青 (Blue) の3色を組み合わせて色を表示しています。

赤と緑を重ねると黄色、緑と青を重ねると水色になります。
色を重ねる、つまり光を重ねることになり、より明るくなるので、赤＋緑＋青のすべてを重ねると「白」になります。
モニターをつけてない状態は発色していないので、黒い画面ですよね。

ちなみに、HTMLで使う「#FF0000」や「#339966」も、RGBカラーを指定するコードです。

紙：色の三原色＋黒「CMYK」

印刷の画像は「CMYK」、シアン (Cyan)＋マゼンタ (Magenta)＋イエロー (Yellow)の3色と、キー (Key) である黒を重ねて色を作っています。
一般的なフルカラーの印刷物を「4色印刷」と呼ぶのは、CMYKを使うからです。

マゼンダとイエローを重ねると赤、シアンとイエローを重ねると緑になります。
色を重ねる、つまりインクを重ねると、暗くにごっていくので、シアン＋マゼンダ＋イエローをすべて重ねると「黒」になります。
モニターとは逆に、何も印刷されていない紙は白いままです。

RGBとCMYKに同じ色はない

RGBは光、CMYKはインクの組み合わせなので、そもそも色の作り方が違います。
「赤」は、モニターでは「R：255」、紙では「M：100％＋Y：100％」です。

Photoshopのカラーピッカーで見てみると、「R:255」は「印刷の色域外の警告」が表示され、「M：96％＋Y：95％」となっています。
あらためて「M：96％＋Y：95％」と入力してみると、「R:231＋G：31＋B：24」となり、「R：255」よりもくすんだ赤が選ばれています。
また、「M：100％＋Y：100％」と入力しても、「R:230＋B：18」となります。

同じ色で再現するのは、非常に困難です。
とくに蛍光色に近い明るい色、彩度の鮮やかな色は、単純なCMYKでは発色しません。

モニターと紙では、色は変わるものだと思ってください。

画像が粗くて汚い

モニターではキレイに見えてた画像なのに、
印刷したらモザイクっぽくなってしまった

画像のきめの細かさを解像度と呼びます。
解像度が低いと画像は粗くなり、ぼやけた画像になります。
低い解像度の画像を、きめ細かな高解像度に変換することはできません。
元データの確認が必要になります。

解像度の違い

一般的に、モニターは72dpi、印刷物は350dpiの画像を使用します。
ウェブと同じ画像を印刷物で使用するなら、約5倍のサイズの画像が必要になります。

モニター画面は、小さなドットの集まりでできています。
dpiは「dots per inch」の略で、1インチの中に何個のドットがあるかを示しています。

例えば、直径1インチの円を描いた場合、5dpiでは何の形か分かりませんが、25dpiならば円形だと分かります。
解像度が高ければ、もっとなめらかになります。

サイズに適した解像度

はがきサイズの画像の場合、
モニターでは「283px×420px」ですが、印刷物では「1378px×2039px」のサイズが必要になります。A4に必要なサイズは「2894px×4093px」です。

多少の拡大・縮小はできますが、小さな画像をあとから大きくしようと思っても、ぼやけた画像をくっきりとした画像にすることはできません。
フリー画像を使う場合や、デジカメで撮影する場合など、あらかじめ用途にあわせたサイズを用意するように意識しましょう。

ロゴがぼんやりしている

印刷会社にJPEGデータでロゴを渡したけど
仕上がりがなんだかぼんやりしている

JPEGデータでも、解像度が高ければ対応してもらえるかもしれませんが、ウェブで使うより5倍大きいサイズを用意しなければなりません。
そもそもJPEGデータは“RGB”なので印刷物では色が変わります。

会社の看板ともいえるロゴ。できるだけキレイに見せたいですよね。
可能ならば「Adobe Illustratorデータ」（以下aiデータ）を用意してください。

「aiデータ」とは

前項で解像度についてふれましたが、aiデータには解像度がありません。
aiデータは「線」で形作られています。（ベクタ形式と呼ばれています。）
写真データは「方眼を１マスずつ塗りつぶして2cmの円を描く」のに対し、aiデータは「指定された座標に半径1㎝の線を描いて内面の色を変える」のです。

まず線を描いて滑らかな輪郭をキープするので、ゴムが伸び縮みするように拡大縮小することができます。

データの形式

デザイナーではない方は、Adobe Illustratorに触れる機会は少ないと思います。
それでも、素材としてaiデータのロゴは手元にあると便利です。
aiデータはAcrobat Readerで開くことができるので、内容の確認もできます。

ロゴデータをデザイン会社などに作成依頼した場合、元のaiデータとともに、「epsデータ」「pdfデータ」「jpeg（png、gif）データ」など、いくつかの形式で納品してもらいましょう。
「epsデータ」は、Adobe Illustratorのバージョンに影響されにくい形式です。

印刷業者へロゴデータを渡す際は、「aiデータ」か「epsデータ」が適しています。

まとめ

aiデータの扱いは、慣れていないと難しいイメージがあると思います。
「ロゴデータが欲しい」と言われた時のために、「aiデータ、epsデータ、pdfデータ、jpeg（png、gif）データ」一式を圧縮ファイルとして用意しておく（もしくはデザイン会社に用意してもらう）と、丸ごと渡せるので楽です。

画像を使う際は、サイズに適した解像度を用意してください。
ウェブの4～5倍の大きさが必要になります。

また、印刷物は、紙質によっても色が変わります。
厳密な色管理が必要なら、専門のオペレーターに任せましょう。

画像：お金イラスト フリー素材-2

つぎつぎに新しい決済サービスが生まれていますね。
ECサイト運用をされている方は特に決済の仕組みやデザインについて考える機会は多いですよね。
元記事では実体験をもとに「お金を払った感」を人はどのように感じるのか、について書かれています。

決済音について主に書かれていますが、サイトにおいてもユーザーが決済が完了したことに気づくデザイン設計は重要です。
このように実際に体験したことからUXデザインについて考えると、ユーザーがどんな体験を望んでいるのかがリアルに考えられますね。

ちなみにこの記事を読んで個人的には、クレジットカードを生まれて初めて持ったとき、カード払いに慣れてしまうと現金がお財布からなくなる感覚がないからお金を使いすぎてしまうんじゃないか、と心配になったことをふと思い出しました。（昭和的発想ですかね…）

「お金を払った感」はどのようにデザインすればよいのか | Goodpatch Blog