海外の事例はいろいろあるので見てきたのですが、国内ではどんな会社が取り組んでいるのか、興味があったので調べてまとめてみました。 「おいおい、この会社が足りないぜ！」というものがあればコメントで教えていただけると喜びます。 Wantedly

円グラフについて「書くときの注意点」「円グラフの種類」「どういったデータが円グラフに向いているか」「実際の円グラフのデザイン」などを画像を使ってわかりやすくまとめました✨ note公式Twitterでも紹介された人気記事なので、よかったら見てね😊 さくっと書きたい人は「円グラフの種類」から読むことをおすすめします。いろいろな円グラフのデザインがあるので、気に入ったグラフを真似して使ってね。 しっかり考えて書きたい人は、「円グラフを書くときの注意点」を読めば、見やすい円グラフの作り方がわかるとおもいます。 円グラフを書くときの注意点・本当に円グラフでいいの？ 円グラフはわかりにくくなりやすいグラフです。 要素が3つ以上ある場合は、棒グラフを使ってみるのもおすすめです🙆 「円グラフは使うな」という方もいますが、私は使い方さえ間違えなければ円グラフも素晴らしい表現方法だと思うので、簡単にわか

デザイナー不在の組織では、専門家不在の状況でデザインに関する議論をすることに不毛さを感じているケースもあるのではないでしょうか。 フロントエンドエンジニアさんが必要に感じてデザインシステムを独学で作ったのでそれをレビューして欲しいというオーダーをいただきました。 さて、これは困りました。デザインシステムは外部の人間がさらっと目を通して評価できるような性質のものなのでしょうか。半分は正解で、もう半分は違うように感じます。 Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド 改めてこの本を読んでみると、多くの疑問に対する答えが書いてありました。そうだ。これを元にワークにしよう！ デザインシステムを理解するワークをMiroで行う 自由にアクセスして、ぜひご自身やチームでのワークにご活用ください。 クレジットなどでちらりと名前を挙げてくださったら嬉しいです。 ht

みなさんこんにちは！ デザイナーのえびちゃんです。 フォントってデザインの印象を決めるのにとても大事な要素ですよね。 フォントを変えるだけでガラッと印象が変わったり、しっくりこないな〜と思って先輩にレビューをもらったらフォントが原因だと気づいたり……。 ですが、デザインをはじめて間もないころだと、知っているフォントも少なく、出したい表現に近いフォントを探すのにも一苦労しますよね。 街中でよく見かけるフォント、使いたいけど名前がわからない、とかとか……。 そんなデザイナーの方に向けて、普段私がアイキャッチやバナーなどグラフィックデザインでよく使用している・使用したいなと思ってアクティベートしているAdobeフォントを、見せたいイメージ別に実際の制作物を用いながらご紹介します。 【LIGブログ編集部からのお知らせ】 独学でつまづいているなら「スクール」での勉強もおすすめです！ えびちゃんが学ん

ロゴのコンペで土俵に上がらなかった提案の例と解説（というか発注者の心境） バナーやロゴなどの単体の依頼は長期拘束されず、「画像一枚で見た目勝負できてかんたんに作れるし数打ちゃ当たる」ように思えるので駆け出しデザイナーはこういう依頼に応募しがちですが、実際は画像の見た目だけで選ばれるほど簡単じゃないのでなかなか採用されないということもあるかと思います。 具体的な例で見ていきましょう。 かんたんに書くとこんな感じです。（実際はもっと丁寧に書いてます） 募集終了まではランサーの提案は非公開。他人の案をパクることはできません。 弊社が選定するのではなく、最終的に選ぶのは弊社のお客様であるというところが結構ポイントです。 ここを説明せずにただやってほしいことだけを記載している発注者も多いと思いますが、裏側は実は、ということもあります。 間に発注者（今回でいうと弊社担当者）が入っているので、情報の伝達

ユーザビリティというのは普遍的に重要なデザインテーマの一つですが、一方でユーザビリティへの関心は、UXが普及して以降、徐々に失われている印象があります。例えば、ユーザビリティがテーマにした書籍のほとんどは2000年代の刊行で、少なくとも日本国内において、2010年代以降に発刊された書籍は僅かです。 実際、Googleトレンドで2004年からの「ユーザビリティ」と「UXデザイン」の検索動向を比較しても、「UXデザイン」が2010年以降に増加傾向であるのに対して、「ユーザビリティ」は2000年代前半をピークに下降しています。 「UX」だと別の意図の検索を含むため、あえて「UXデザイン」で比較していますが、ここにデザイン文脈で使われる「UX」を加えると、「UX」は「ユーザビリティ」を確実に上回っているはずです。 だからといって、2010年代以降にユーザビリティが重要でなくなったわけではありません

「デザインをどうやって勉強すべきか？」WEBやグラフィックのデザイナーを目指している人に共通の悩みだと思います。 「デザインの技法」については、結構書籍も出てきています。しかし、デザイン勉強中の人が、技法とデザインと結び付けて考えるのは難しいようです。 そこでTwitterの投稿「#広告からデザインを学ぼう 」シリーズで紹介した、レイアウトや配色などの「デザインの基本原則」をnote用にまとめました。 身近な広告を事例に、デザインを学んでいきましょう。 ※タイポグラフィーの３原則を追記しました（2020/08/12） ※余白の操作方法を追加しました。（2020/11/17） 最初に：センスはいらない？！６つのデザインの基本原則自分はデザイナーになってから気がづきましたが、デザインはセンスで何とかなる分野ではないんです。長い歴史で培われた「デザインの原則」を学ぶ必要があります。 でも、逆に言

デザインをする際に欠かせない要素の一つとして、カラーの配色がありますよね。しっくりこない、これであってるのかな？などで悩んだ経験は1度や2度はある事と思います。 今回はWEBサイトをデザインする際に必要な、ベースカラー、メインカラー、アクセントカラーの配色や配分についての基本ルールをまとめてみました。 3つのカラーとは？その比率とは？ WEBサイトの配色は役割別に３つあり、それぞれに、ベースカラー、メインカラー、アクセントカラーと呼びます。各々の比率をベースカラー70％、メインカラー25％、アクセントカラー5％の割合にすると、美しい配色に仕上げることができます。 ベースカラー 最も大きな面積を占める基本となる色で、余白や背景などに用いることが多い色です。メインとアクセントのカラーを引き立てる脇役的な立ち位置。 メインカラー その名の通りサイトの印象を決定づける主役の色です。 アクセントカラ

クライアントから「可愛くしてください！」「おしゃれにしてください！」「かっこよくしてください！」「企業イメージ出してください！」 デザイナーなら誰もがそんな要望を受けたことがあると思います。 そんなふわっとしたリクエストや要望、赤字に応えるためのデザインの修正方法・テクニックを解説したデザイン書を紹介します。 本書は、今年も快進撃が止まらないソシム社の新刊。 またもや興味深い、面白い書籍の登場です！ 今回はデザインの何かに特化して学ぶ的なものではなく、デザインの方向性、修正・手直しの方法を解説した一冊です。リクエストや赤字の具体例が数多く掲載されており、「あるある！」と心の声で叫びながら、デザインを楽しく学べます。

［CEDEC 2020］「星のカービィ」のUIはおもてなしの心で作られている。UIデザインが分かりやすく言語化されたセッションをレポート 編集部：御月亜希 ゲーム開発者向けカンファレンス「CEDEC 2020」の2日目（2020年9月3日），ハル研究所は「カービィUIでおもてなし！『ゲームとプレイヤーを繋ぐUI』を目指して」と題したセッションを行った。 このセッションでは，同社の人気シリーズ「星のカービィ」（以下，カービィ）において，どのようにユーザーインタフェース（UI）が作られているのかを，UIアーティストの伊藤晴香氏と，リードUIデザイナーの剣持 紫氏が紹介した。UIデザインが論理的かつ分かりやすく言語化されたセッションの内容をお伝えしていこう。 本セッションの主題となるカービィのUIとは，どのようなものなのだろうか。UIチームは，迷わないUI，ストレスや不快感を与えないUI，印象に

はじめにこのnoteは、私がTwitterで発信した「デザインの思考＆Tips」のなかから、配色に関する内容を編集してまとめたものです。 僕自身、配色はあまり得意ではありません。だからこそ書籍などで学ぶのはもちろんですが、それ以外で普段取り組んでいることや、仕事を通して気づいた視点や発見、実例について、まとめてみたいと思います。 カラーパレットに「トーン」を自力で用意する色を決めるとき、当然カラーパレットを使うのですが、デフォルトのままという人も多いかもしれません。ただ、なんの基準もなくカラーピッカーをグリグリいじくって彷徨っていても、迷っちゃわないかなぁと思うのです。 そして、配色に慣れていない人は、赤かな？青かな？緑かな？…と、色相（かつ彩度の高い色）だけで選んでいるような気がします。ハッキリとした色だから“決まった”感がすぐに得られるのだけど、そこから抜け出さないと、明度や彩度を組み

デザイナー兼踊り手のJona（＠jona_yawaraka）です。わたしはLIGブログに掲載されるアイキャッチ（ブログ記事の顔になる画像）、バナー、背景ジャック（大型バナー）など、さまざまな画像を製作してきました。 画像をつくって客観視したとき、「ある程度まとまってはいるんだけどなんだかしっくりこない。でも何が悪いかわからない……」ということありますよね。 わからないときはとにかく手を動かして、いろいろと試してみるとうまくいったりするもの。ということでデザインがしっくりこないときにとりあえず試したい10の簡単な方法を、私の経験を踏まえながら紹介いたします。 独学でつまずいていませんか？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。どんなスクールがあって、どんな内容が学べて、費用はどれくらいするのか、情

Creative Cloudでチラシやカード、webバナーや販促品を作る前に、まずはデザインの基本をしっかりと理解することで、より魅力的なものを作ることができます。 このページはデザインをこれから学びたいという方、デザイナーではないけど、目の引くチラシや販促物を作りたいという方、初心者っぽいデザインから抜け出せなく悩んでいる方におすすめです。人気書籍『なるほどデザイン』著者・筒井美希さんがデザイン初心者にわかりやすくまとめたデザイン入門ページとなります。 わたしが生まれて初めてアドビ製品に触れたのは、高校生のとき。デザイン専門学校の体験授業の最中でした。Macintoshがずらりと並ぶ教室にワクワクし、Photoshopでフィルターを片っ端から試して遊んでいたわたしに、教えてくれていた先輩学生がひとこと、アドバイスをくれました。 「ソフトウェアの機能はいっぱいあるけど、実際にすべてを使うわ

ローソンは2020年春、プライベートブランド商品のロゴ・パッケージを刷新した。これまでの「ローソンセレクト」を「L basic(エル ベーシック)」「L marche(エル マルシェ)」の2つのブランドに一新したという。手掛けたのは国内外で幅広いクリエイティブを行うデザインオフィスnendoだ。 確かにデザインは美しい。しかし店頭に並んだ商品を見ると、統一感はあるが何の商品だかわかりづらい。Twitterでも「前のデザインの方がわかりやすかった」という消費者の声が目立つ。 筆者の和久井は、ライターと並行して合同会社ブラインドライターズという、視覚障害者を中心とした会社を運営している。スタッフには、中心視野が欠けていて焦点が合わない人、全体的にぼやけて見える人、トイレットペーパーの芯から物を覗いているように見える視野の狭い人など、さまざまな視覚の状態の人がいる。彼らにも見てもらったが、「非常

Webサイトでもスマホアプリでも、アイコンのデザインは非常に重要です。優れたアイコンをデザインするために必要な7つの原則を紹介します。 アイコンだけでなく、UI全体のデザインにも通じるプロのデザインテクニックが詳しく解説されています。 7 Principles of Icon Design by Helena Zhang 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Clarity -アイコンは分かりやすく Readability -アイコンは見やすく Alignment -アイコンにおける揃え Brevity -アイコンは簡潔にデザインする Consistency -アイコンの一貫性 Personality -アイコンの個性 Ease of Use -アイコンの使いやすさ アイコンのリソース Clarity -アイコンは分か

丸山 恭右 / TSUYOSHI 連載中 @maruccckey 漫画家。サイコミにて連載中。 『TSUYOSHI 誰も勝てない、アイツには』 （最新18巻 発売中） ◇Youtube：onl.tw/rE7r5Qs ◇Mail：rickey.mk03@gmail.com cycomi.com/title/96

どうもご無沙汰しておりますせんざきです。 最近、デザインを見る訓練をすごく重視してやっています。 このテーマは、タイトルだけ書いておいて、まだ書く時じゃないなあと思いながら温めていたものです。 正直まだ、書く時じゃないなあという感じもするのですが、どういうことなのか言語化できそうな段階まで来たので、メモがわりに書き起こしていこうと思います。 はじめにまず、「デザインを見る訓練ってなんやねん」っていう話をします。 本当にここ数ヶ月、デザイナーにとっての見る力の大切さを日々感じているんです。 このツイートは、見る力について書いていて、結構反響があったものです。 原研哉さんが運営してる低空飛行っていうサイトがあるんですけど、ここの写真や映像、iPhoneで撮ってるらしい、、 目が良ければiPhoneでもこんなに綺麗に撮れるんだなあhttps://t.co/S7WBO3JSG8 pic.twitt

こんにちは。minneでデザイナーをしております。sziaoreoです。 minneではデザインに作品画像を素材として使用させていただくことが多く、バナーなどでよく画像をグリッド状に並べます。 業務でそういったデザインを何度も作っているうちに、なんとなくこう考えると楽だな〜というマイルールができてきました。 この記事ではわたしが画像をグリッドで並べる時に考えていることを書いていきます。こういう考え方もあるのね程度に読んでくださればと思います。 画像を並べる時、わたしは以下のように心がけています。 画像が持つ様々な要素・存在感を「重さ」として考え、 「組み上がった時にどこかに重心が偏ってしまっていないか」 「同じ重さの要素を持ったもの同士がやたらと隣り合っていないか」 というようにバランスを保つように組む その時に使える画像や制作物の目的によっても変わりますが、 配置を決める際の優先順位が高

主にこれからPhotoshopを使い始めようと思っているとか使い始めたばかりという人向けに、知っておくと便利な機能を紹介します。 ひとつひとつはちょっとしたことでも多用するのであれば覚えておくことでより効率よく作業することができますし、中には使いこなすことができれば大幅な作業時間の短縮に繋がるものもあります。 ここで紹介しているのは「Adobe Photoshop CC 2017」を使用した想定のものになります。 その他のバージョンを使用している場合は一部使用できない機能があったり、機能自体はあってもメニュー位置や設定方法などが若干異なっている可能性があります。 ショートカットを活用する 特定のキーでツールを選択状態にしてすぐ使えるようにしたり、メニューから選んで実行していくようなものを即座に実行できるようになど、Photoshopには様々なショートカットが用意されており、普段からよく利用

こんにちは、デザイナーの佐野大河@sn_taigaです。先日、クックパッドのiOSアプリで「キッチンレポート」という自分のレシピ投稿の活動の成果がわかる機能をリニューアルしました。今日はそのデザインプロセスについてお話します。 キッチンレポートとはキッチンレポートでは、自分の投稿したレシピやマイページへのアクセス数が見られる他、個々のレシピのアクセスランキングやつくれぽ（レシピを見て料理した人から届くメッセージ）などが見られます。レシピが保存された数や印刷された数もわかり 「自分のレシピが誰かの役に立っている！」という実感を持つことができます。 他にも「公開レシピが30品になりました！」や「あなたのレシピが人気順検索でトップ10入りしました！」など、自分が投稿したレシピに関する嬉しい出来事を残してくれる機能もあり、ユーザーの継続的なレシピ投稿や日々の料理のモチベーションにも繋がっています。