「見る力」と「言語化する力」の鍛え方 「見る力」と「言語化する力」はどのようにして養えるのでしょうか。 「見る力」はデザインの細部に着目し、「何がどのようになっているのか」を考えることで鍛えられます。文章の一部が他の文字と違う色に変わっている、写真の服の色と図形の色が同じ、ロゴと文字が中央揃えになっている、背景がグラデーションになっている……など、小さな範囲でできるだけ多くの要素を発見してみましょう。 デザイン全体を見るのではなく、次の5つのカテゴリごとにグループ分けして観察すると、具体的な要素を発見しやすくなります。 ・文字：フォントの種類、色、大きさ、太さ、文字間、行間、ふりがななど ・図形：形、色、大きさ、太さ、塗り、線、写真の切り抜きなど ・色：色数、組み合わせ方、色ごとの割合、色相・明度・彩度など ・背景：要素との重ね方、使用する素材、切り抜き方、余白・枠、質感（テクスチャ）、模

アクセシブルなビジュアルをデザインするためには、色のコントラストを考慮すること、色だけに頼らないこと、インタラクティブな要素を識別しやすくすること、画像に対して役立つ代替テキストを提供すること、実際のユーザーでビジュアルをテストすること、が挙げられる。 5 Visual Treatments that Improve Accessibility by Kelley Gordon on October 30, 2022 日本語版2023年5月10日公開 CDC（アメリカ疾病予防管理センター）によると、米国では6100万人の成人が障害を抱えて生活している。障害を持つ人々の数と、アメリカ障害者法（ADA）のWebサイト関連の訴訟の近年の増加を見る限り、これらの人々のためにデザインをすることは不可欠である。また、アクセシブルなデザインは、結果的にユーザビリティを向上させる。Web Content

社会課題に取り組む挑戦者たちにデザインの力を。SDGs促進を志す企業・団体・NPO法人へグッドパッチがデザインを無償支援 デザインの力でビジネスを前進させるグローバルデザインカンパニー株式会社グッドパッチ（本社：東京都渋谷区、代表取締役社長：土屋 尚史、以下「グッドパッチ」）は、持続可能な社会の実現を目指す企業・団体・NPO法人に対して無償でデザイン支援を開始することをお知らせします。 ◼️背景 グッドパッチは、創業当初からこれまで、企業が持つビジネス課題をデザインで解決するべくデザインパートナーとして大企業からスタートアップまで支援してきました。Webやスマホアプリなどの使い勝手の良いUIの実現や、サービス利用時のUX設計を強みとし、事業成長に寄与するUI/UXデザイン、ビジネスモデルデザイン、ブランド体験デザイン、デザイン組織構築、ソフトウェア開発までデザインにまつわる様々な知見と実績

その人工物を利用する人々の視点にたって、どのようなあり方が適切で望ましいかを考えることは、デザインの基本である。これまでは主に製品やサービスを対象にしてデザイン活動が行われてきたが、社会システムについても同じようなマインドセットで取り組むべきである。 黒須教授 2018年10月9日 製品・サービスのデサインから、社会システムのデザインへ デザインの視点は、それが新規なデザインであろうと、既存のもののリデザインであろうと、人間がデザインしている人工物すべてに向けられるべきだ。その人工物を利用する人々の視点にたって、どのようなあり方が適切であり、望ましいかを考えることは、デザインの基本である。利用者視点という方向から、これまでは主に製品やサービスを対象にしてデザイン活動が行われてきたが、社会システムについても同じようなマインドセットで取り組むべきである。 ここで社会システムというのは、社会的な

色やタイポグラフィだけでなく、言葉でプロダクトの雰囲気が決まることがあります。早期からダミー文字を避けてコンテンツをデザインするべきですが、簡単に作れるものではありません。 良い事例を探そうとすると必ず辿り着くのが Mailchimp の Voice and Tone 。「Mailchimp らしさ」が明文化されているだけでなく、ライティングの基礎も書かれている優良コンテンツです。しかし、英語の壁がありますし、文化の違いもあるのでそのまま真似するのは困難です。 そこで今回はラベルのライティングというミクロの視点と、出来上がるまでのプロセスを把握するマクロの視点からコンテンツの課題と対策を紹介します。 ラベルデザインにある3つの特徴 UI のラベルをどのようにデザインすれば良いのかを考える上で、 Airbnb アプリは好例です。ローカライズの視点も加えるとさらに面白いので今回は日本語のインタ

Case: Unignorable 貧困・孤立・教育格差・ドメスティックバイオレンス…誰にでも起こり得る事柄でありながら、いざ自分が当事者になるまでは、ほとんとの人が他人事だと感じているのではないでしょうか。 カナダ国内に90ヶ所の支部を持ち、各コミュニティにおけるこれらの社会問題について支援活動を行う非営利団体・United Wayは、そんな人々の“無関心”を変えるべく、世界的な色見本帳のPantone Color Institute®とパートナーシップを組んで啓発キャンペーンを実施しました。 Pantoneより新色として登場したのがこちらのカラー。コーラルレッドと言うのでしょうか、赤にオレンジが混ざったような、ハッと目を惹く鮮やかな色合いながら、どこか温かみを感じさせます。 United Wayは『Unignorable(＝見過ごすことのできない、大切な)』と名付けたこの色を、コミュニ

『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day

2018年9月8日 builderscon tokyo 2018 （#builderscon）に登壇しました。様々なタイプのエンジニアが集まる大イベント。エンジニア寄りの話ばかりの中でデザインの話をしてきました。とはいっても、直球のデザインの話をしても面白くないと思ったので「デザイナーとうまく協働する方法」というコミュニケーションについて今やっているコトと今後の課題について話しました。 職種を超えた言語共有の難しさ ニュアンスだけでなく言葉ですら捉え方は様々です。デザイナーの間でさえ「デザイン」という言葉から思い浮かべる職域や働き方が微妙に異なります。「プロダクトのあるべき姿」であればなおさらです。人によって「良い」の定義が異なれば、優先順位も微妙に変わります。 こうした課題を解決すべく、言語化・視覚化があちこちで行われています。ペルソナを作るのもひとつですし、プロトタイプも方向性を共有す

機器の外観やグラフィックのデザインの仕事には、直感と感性、そして描画や造形のスキルが重要だ。だが、近未来のデザイン領域のデザイナーにとっては、それらや、人間工学や認知工学の知識だけでなく、洞察力や論理的思考能力、つまり理知的側面が重要だと考えている。 黒須教授 2018年8月28日 直感と感性とスキルによるデザイン ともすると、デザインの仕事は直感と感性とスキルで進めていくものだと思われがちだ。最近ではオフィスでの服装は比較的自由になってきたようだが、以前は、柄シャツやTシャツ姿で職場にいるような人たちは大抵デザイン部門の人と決まっていて、感性にあふれていることを服装でもアピールしていた。 たしかに機器の外観やグラフィックのデザインには、直感と感性、そして描画や造形のスキルが重要だ。しかし、それでも最小限度の人間工学や認知工学の知識は必要で、さらに近年ではユーザ調査のスキルも必要とされるよ

こんにちは、灰色ハイジです。 私が在籍しているサンフランシスコにあるプロダクトデザイナー養成所「Tradecraft」では、座学だけでなく手を動かして問題解決に挑むカリキュラムがたくさんあります。そのうちの1つがこの「ホワイトボードチャレンジ」です。 目次 ホワイトボードチャレンジって？ 全体の流れ Step0: 準備 Step1: 問題を理解する（5分） Step2: アイデアを具体化する（14分） Step3: まとめる（1分） 参考記事＆便利ツール 最後に ホワイトボードチャレンジって？ ホワイトボードチャレンジは、選ばれたお題に沿って、「クライアント役」からのヒアリングからスケッチまでを、「デザイナー役」の人が20分間で行うUX/UIデザインの訓練方法です。 デザイナーだけでなく、プロダクトに関わる人全員の問題発見能力とヒアリング、デザインについて伝えるスキルを鍛えるのに役立ちます

チーズはハンバーガーのどこに置くべきでしょうか？ AppleとGooleのハンバーガーの絵文字はTwitterでかなり話題になっていました。各社のハンバーガーや味といった観点からではなく、デザイン面からこの違いを解説した記事を紹介します。 Hamburger Emoji (🍔) War: Why Is Apple Right 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 2つのハンバーガーの絵文字 Twitterで「Appleはパティ（肉）の上にチーズがあるのに、Goolgeはなぜパティの下にチーズがあるのか」と指摘され、GoogleのCEO、Sundar Pichai氏は、「我々のを取り下げる」とツイートしました。 Sundar Pichai‏氏のツイート この件はThe Vergeで最初に見かけました。そこではこの2つの

ロゴのデザインには、タイポグラフィ、線、形、色、質感、バランス、リズム、配置など、デザインの基本となる要素や原則が詰まっています。最近のトレンドが効果的に取り入れられたロゴデザインに使われているトレンド、デザインテクニックを紹介します。 ロゴのトレンドの最新版は、こちら。 2021年、ロゴデザインのトレンド -最近のロゴに使われているデザインテクニックのまとめ 2017 Logo Trends 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 トレンドの流れを見るのも面白いと思うので、過去分も。 2016年のロゴデザインのトレンド 2015年のロゴデザインのトレンド 2014年のロゴデザインのトレンド 2013年のロゴデザインのトレンド 2012年のロゴデザインのトレンド 2011年のロゴデザインのトレンド 2010年のロゴデザイ

このブログはWebサイトのデザインや制作に関することを中心に色々なジャンルに基づいて書いているのですが、そもそもWebデザイナーが何なのか？を書いたことがなかったので、今回具体的に書くことにしました。 Webデザイナーと一口に言っても、在り方が様々なので、人によっては該当しないこともあるかもしれませんが、この業界を目指す人にとっては一つの指標となると思います。 目次 Webデザイナーの仕事 ヒアリングとスケジュールについて 情報設計（IA・情報アーキテクチャー） UIデザイン モックアップ・プロトタイプの作成 ページのデザイン コーディング 仕事の分担 Webデザイナーの種類 インハウスのWebデザイナーについて Webマーケティング SEO SEM 広告運用 必要なスキルや知識 資格 Webデザイナーになるには スクールを利用する 職業訓練校に通う セミナーに参加する 独学で学ぶ Web

2017年ここ最近、よく見かけるようになったデザインのトレンドを紹介します。 トレンドの好き嫌いに関わらず、デザインのアンテナを張っておくことは大切です。今すぐに使うことがなくても、未来のプロジェクトでその知識が役立つかもしれません。 Essential design trends, January 2017 Essential design trends, February 2017 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 視線を誘導する空白スペースの新しい使い方 プロダクトの見せ方 パステルカラーはソフトに 画像のオーバーレイはダーク系 ブルータリズム テキストの新しいエフェクト 視線を誘導する空白スペースの新しい使い方 空白スペースはデザインを素晴らしくしたり、壊したりすることもあります。それが白や背景色、または文

検索事業部のデザイナー倉光です。 今回は、開発現場でアイデア発散フェーズにやっていることの一例を紹介したいと思います。UIデザインの手法として比較的知名度は高く、デザイナー以外でも学びたいという要望も多い「ペーパープロトタイピング」についてです。 前提として プロトタイピングにはフェーズと目的に応じて 様々な手法がありますが、今回は「小規模チームでアイデアをぽんぽん出し、伝え合うためのプロトタイピング」の話です。ユーザーに実際に評価してもらうためのプロトタイプの作り方についてはこの記事では割愛させていただきます。 また非デザイナーの方は「いやいや、デザイナーじゃないと画面なんてうまく書けないよ…」と躊躇してしまうかもしれませんが、本記事では社内のディレクター/エンジニア/インターン生が書いた成果物も掲載していますので、そちらも参考になると思います。 目次 目次 1.ペーパープロトタイピング

2016年10月4日 インスピレーション 使ってますか？Instagram。友人の写真を見るのも楽しいですが、美しいデザイン、作品を眺めるのもワクワクしちゃいますよね。そこで今回は、デザイナーやイラストレーター、アーティストなど、多分野で活躍中の方のInstagramアカウントの中から、プライベートの写真少なめで、作品の写真をメインに投稿しているアカウントをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ Seb Lester

買いたい野菜は、畑から自分で収穫！ ブラジル発、「新鮮な野菜を買いたい」という要望を叶えるスーパーマーケット「Zona Sul」 2016.09.11 ライターインターン ライターインターン スーパーで野菜を買うとき、みなさんは何をチェックしますか？ ラベルに書かれた値段や産地、または商品の色や形、鮮度をよく見る方もいることでしょう。店内で「産地直送」「地産地消」といったメッセージを見ない日はありませんが、それは私たち消費者が、新鮮な野菜をほしがっていることの証といえます。 どうやら、この消費者マインドは世界共通のようで、ブラジルでは今、あるスーパーの陳列方法が注目を集めているんです。 リオ・デ・ジャネイロを拠点とする、ブラジルの大手スーパーマーケット「Zona Sul」は、一見した様子はごく普通。ですが中に入ってみると、まるで畑のように広がる、野菜売場に目を奪われます。その名も「フレッシ

2016年5月10日 Webデザイン, ユーザビリティ, 色彩 人間は一瞬で物を識別します。研究によると、たった0.1秒で人を判別できるようです。Webサイトにおいても同じことが言え、ユーザーはWebサイトを開いて0.05秒でそのサイトが好きかどうかを判断し、そのサイトを見続けるか、閉じるかを決めるそうです。そんな大切な「第一印象」。どのようにチェックすればいいのか、考えていきましょう！ ↑私が10年以上利用している会計ソフト！ ぼかしテスト ぼかしテストでは、デザインをぼかした状態で確認し、強調するべき箇所が強調されているかをチェックします。 テスト方法 Photoshopを使う方法と、ブラウザーを使う方法があります。 Photoshopを使う方法 バナー広告やWebサイトのスクリーンショット画像を用意 Photoshopで フィルター＞ぼかし＞ぼかし（ガウス）で5〜10pxほど画像をぼ

Nick Babichさんによる寄稿記事です。ソフトウェアエンジニア、テクノロジーの熱狂的な支持者。UI/UXに夢中。ソフトウェア開発、マネージメント、生産性などなどについて執筆している。Twitter アカウントは、@101babich。本記事は、Mediumへの投稿記事を許可を得て翻訳したものです。元の英語記事もどうぞ。 私たちが日々の生活の中で体験するマイクロインタラクションの例 最高のプロダクトは、2つのことで秀でている：機能とディティール（細部）だ。機能によって人はプロダクトに魅力を感じ、ディティールによって、それを使い続ける。このディティールこそ、特定のアプリが競合から抜きん出る理由だと言える。 マイクロインタラクションは、ユーザーに対して快適なフィードバックを返すために有効なテクニックのひとつだ。 あらゆる道は、人間中心設計のデザインアプローチへと続いている。そこで最優先され

たまには本もいかがですか？ セミナーやワークショップのあとに質問を受けることがありますが、「おすすめの書籍はありますか？」と聞かれることがあります。 Web には膨大な情報がありますし、英語まで手を広げると研究者による文献にもアクセスすることができます。しかし、ある特定のトピックを要所を落とさず学びたいときは書籍が便利です。 目まぐるしく状況が変わるだけでなく、デザイナーとして知っておくべき領域も広い今日のデザイン。ソフトウェアの使い方を覚えることも重要ですが、作るための考え方や伝えた方を学ぶことに多くの時間を費やしたほうが良いでしょう。自分のデザインの意図が説明できて、ようやく同僚やクライアントにデザインを理解してもらえるからです。 今回は、デザイナーとして読んでおきたいオススメの入門書を紹介。Web やアプリに特化したものではなく、デジタルプロダクトに携わるデザイナーに向いている書籍を