イメージスケールの基本 | カラー戦略の専門家 | NCD-WEB | 色彩心理・生活者研究・トレンド分析の日本カラーデザイン研究所
※一部のInternet Explorerで「データベースシステム」「Hue&Toneシステム」を閲覧できないケースが発生しております。 お手数ですが、別のブラウザでお試しください。 イメージスケールとは イメージスケールは日本カラーデザイン研究所が研究・開発した感性マッピングツールです。 色に対して抱くイメージは人によって微妙に異なりますが、共通する部分も多く認められます。そのイメージの共通感覚を心理学的研究の蓄積で明らかにしたものが、イメージスケールです。 基本のイメージスケールは、イメージの判断基準であるWARM－COOL、SOFT－HARDの座標軸上に単色、形容詞、形容動詞を表現した配色が配置されています。(本来は第3軸としてCLEAR-GRAYISHの軸があり、3次元のイメージ空間となっています) ■カラーイメージスケール すべてのイメージスケールの元となっている単色イメージスケ
Zeplinがかなり便利！Adobe XDやPhotoshopからデザインの指示書やスタイルガイドを簡単に自動作成できる | コリス
Webサイトやスマホアプリのデザインの指示書やスタイルガイドをわざわざ作成するのは時間がかかり、なかなか面倒です。Adobe XDやPhotoshopなどで作成したファイルから、Zeplinでこれらを自動生成する方法を紹介します。 Zeplinは1プロジェクトまで無料で利用できます。Adobe XDにもデザインスペックという機能でデザイン指示書を自動生成できますが、Zeplinの方が一枚上手だと思います。 ZeplinはAdobe XD, Photoshop, Sketch, Figmaに対応しており、ここではAdobe XDを使用して解説します。基本的な使い方は同じです。 準備: Adobe XDとZeplinのインストール Adobe XDでデザインを開く Adobe XDからZeplinにファイルをインポート Zeplinでデザインの指示書・スタイルガイドを作成 準備: Adobe
フロントエンドエンジニアから、デザイナーさんに意識してほしい10のこと｜Pittan｜note
フロントエンドエンジニアとデザイナーさんは日々協力してプロダクトを作っていく関係にあります。デザイナーさんが作ってくれたものをエンジニアが素早く実現できるよう、いくつかエンジニアから意識してほしいことをまとめました。 なんでこんな話になったのか（前置きなので次の章まで飛ばしてOKです） デザイナーさんから「この画面をこんな風に作ってください」とXDやSketch、PSDなどいろいろな形で渡されることがあると思います。 僕の個人的な意見・経験ですが、いざ実装するぞとなったときに 「あれ…ここってどうしたらいいんだろう？」 と迷って作業のスピードが落ちてしまうことがとてもストレスに感じていました。できればノンストップでいきたいなあと思うわけです。 手が止まるたび、デザイナーさんに「ここってどうしたらいいですか？」と質問するのが何か新しい画面を作るときに必ず発生していました。 「（いつも聞いてる
株式会社LYZON
流行のデザインを知りたいというディレクターや、クリエイティブな力を身に着けたいデザイナー向けに、業種・レイアウト・カラーなど、さまざまな条件で検索できるリンク集をまとめてみました。参考になるWebサイトが見つかれば、知見が広がるだけでなくクライアントとのコミュニケーションも円滑に進められるかと思います。 S5-Style Screenshot by S5-Style 2021年3月23日時点で約7800サイトの登録されているリンク集です。サムネイルが大きくて見やすく、一度に8～12サイトのデザインが見れます。業種・雰囲気・カラー・Web技術・サイトの種類など、多岐にわたる検索で絞り込みができます。 掲載数＊ 7892 S5-Style 81-web.com Screenshot by 81-web.com 最新のクリエイティブなデザインが多数掲載されているリンク集です。気に入ったデザインは
FOLIOリブランディングの裏側 ──構想からリリースまでの8ヶ月の軌跡──｜広野 萌
株式会社FOLIO CDO（Chief Design Officer）の広野です。 この度、オンライン証券サービス「フォリオ」の正式リリースに伴いまして、思い切ったリブランディングをおこないました。 ビフォーアフターはこちらです。 ご覧の通り、今回のリブランディングプロジェクトはいわゆる「ロゴリニューアル」に留まらず、サービスを提供する上でのスタンスを改めて定義し直した、新たなブランドとしてのフォリオを再誕させることになりました。 パット見のビジュアルでいうと、安心を感じさせる「青」から、躍動感のある「赤」に変わるのですから、FinTech系スタートアップとしてはかなり挑戦的なリブランディングのようにも思われるかもしれません。 ここまで辿りつくのに紆余曲折ありましたが、包み隠さずリアルな8ヶ月の軌跡をここに記したいと思います。 【目次】 1. 危機感 2. 幕開け 3. 壁 4. 光 5.
プレゼンスライドに関してのアレコレ：「だんだん文字を抜いていく」｜鷹野 雅弘
いわゆるフラッシュプレゼン（*）のスライドの作成においては「文字を抜いていく」という意識が不可欠。サンプルで解説してみます。 セリフ（口頭で話す内容）をそのまま記入した例スライド内のテキストボックス内に自動折り返しで文字を入力しただけの状態。 これを、グラフィックデザインでは「ナリユキ」といいます。この場合だと「好きなのは」というカタマリが分断されてしまうので、読むスピード（＝理解のスピード）が落ちてしまいます。 プレゼンのスライドは、ある意味、すべてがキャッチコピー。 「読んでから理解する」のではなく、ポスターのように一瞬で「すっと入ってくる」ようにするためには、改行のケアが不可欠です。 なお、行間も調整されていないため、上下の行が、つながっているのか、別のアイテムなのか、「パッと見」で判断できません。 ナリユキをやめて文節で改行ナリユキをやめて、文節で改行した例です。行間も調整していま
組織の立ち上げ、成長に迫る！デザイン組織のつくり方【オプト・Goodpatch編】｜Goodpatch Blog グッドパッチブログ
会社によって、デザイン組織の規模やカタチは様々。プロダクト開発におけるデザイナーの役割が細分化されはじめ、デザイナーをマネジメントする方法やマネージャーの需要が高まっています。そこで、今後組織づくりにもトライしていきたいデザイナーが集まり「デザイン組織のつくり方 オプト×Goodpatchの場合」を開催しました。 今回の登壇者は株式会社オプトでデザイン イノベーション ファーム「Studio Opt」を立ち上げた竹田 哲也さん。Goodpatchでクライアントワークを担当するDesign Div. ゼネラルマネージャーの松岡 毅の二人です。 第1回目のデザイナーが輝ける組織とは？デザイン組織のつくり方イベントレポート【NewsPicks・Goodpatch編】もぜひ参考にしてみてください！ 株式会社オプト Designer | 竹田 哲也さん『デザイン組織ができるまでの道のり』 竹田さんの
ソシオメディア | UITableView の衝撃
ひとつのデザインが事実上の標準となり、その後の基本パターンを変えてしまうことがあります。変わった後ではそれが当たり前となってしまい、その標準に始まりがあったことなど誰も気にしなくなるのです。また振り返ってみたとしても、それがなかった頃の感覚に立ち戻ることはできないので、もはや何がどう新しかったのかを実感することは難しいのです。 2007年に iPhone が発売され、その一年後に日本で iPhone 3G が発売されてから今日（2018年7月11日）でちょうど10年が経ちました。この10年間でスマートフォンやそのアプリを介したオンラインサービスは瞬く間に普及し、私たちのモバイルコンピューティング、コミュニケーション、ソーシャルメディア、Eコマースなどの態様が大きく変化したのは周知のとおりです。 iPhone のデザインは多くの面で新しいものでした。そしてその大部分がその後のスマートフォンの
【パワポ時代の情報整理術】つめこみすぎなスライドがこれでスッキリ！｜Designer
昨今、情報量がとにかく多く、理解しづらいパワーポイント資料が溢れています。「ポンチ絵」や「曼荼羅」などとも呼ばれるこの手の資料。パワーポイントを作る方も、読み解く方も大変です。 でも、わかります。一枚の資料に収めないといけない事情があることを―。会議の配布資料、提案資料、体制図、システムの構成図…。シンプルな資料が良いとわかっていながら、どうしても情報量を落とせない場合もあります。 そこで今回は、掲載する情報量はそのままに、デザインの力で資料をわかりやすくするテクニックをご紹介します。 【Before】元のスライドはこちらお題にするのはこちらのスライド。体制やネットワークを表す図です。一枚のスライドあたりの情報量が多く、色々な要素が詰まっています。 出典：厚生労働省「医療・介護制度改革について」P.1 www.mhlw.go.jp/stf/shingi/2r9852000001gj87-a
デザインデータのバージョン管理ができるAbstractを試してみた✌ | UXデザイン会社Standardのブログ
複数人で1つのデザインデータを編集していると、突き当たるのが「どうやってマージするか問題」です。 作業人数分のデータを複製して用意したり、「これから◯◯.sketch触ります。開かないでください????」とチャットで周知したり……そんな経験をした方も多いのではないでしょうか。 そんなデザイナーの悩みを解決してくれるのが、今回紹介するAbstractです。 Abstractとは AbstractはアメリカのElastic Projects, Inc.が提供しているサービスです。どんなサービスか一言で説明すると「デザイナー向けのGitHub」といったところでしょうか。 Gitの仕組みを利用して、デザインデータ（.sketchのみ対応。Adobe系も対応予定）に対してブランチを切ったり変更内容をコミットしたり、差分をマージする、といったことが可能です。 まだ正式リリースはされておらず、現在はPr
飲食店のメニューだってユーザー導線を考慮しよう | UX TIMES
今回は大阪でワークショップを行った際に食事をした飲食店のメニューのわかりにくさについて勉強会で話し合ったので、改善方法を含めてご紹介いたします。 飲食店メニューの問題 スタッフの1人が名物である「肉つけ麺」を選び注文しました。すると、注文を受けた店員は 「風味は、”ゆず胡椒”と”海老だし”と”ごま味噌”、また、麺は”太麺”と”細麺”、盛りは”ひや盛り”と”あつ盛り”のどれにしますか？」 と注文したスタッフに選択を委ねました。 そんなオプションがあることを知らなかったスタッフは、結果的に店員を待たせてしまいました。 オプションに気づきにくいメニュー 注意深く見なければ、肉つけ麺を選んだ後に「風味」と「麺」と「盛り」を選ばならければならないことに気がつきませんね。 単なるメニューがお客さんを正しく誘導する このメニューの最大の問題はレイアウトが悪いことでお客さんを惑わせていることですが、それに
iPhone X対応におけるデザイン上の注意ポイント | fladdict
iPhone Xが発表されたわけですが、なにこのデザイナー泣かせの変態端末。 iPhoneのUI設計者グレッグ・クリスティが追い出されて、ジョナサン・アイヴがソフトウェア統括となったのが2014年。 iOS7のフラット化あたりから、どんどんとUI設計が置いてけぼりになった感がありましたが・・・ここにきてまたデザイナー泣かせの豪速球が。 ざっくりデザインガイドラインを読んでの、気になったところメモ。 画面サイズ サイズは従来のベースであった4.7インチの375pt x 667ptから、375 x 812ptに。縦方向に145pt追加された。 想定されるインパクト 表示可能な情報量が増える 縦スクロール系コンテンツのコンバージョンが増加 スクロールで隠れるナビゲーションの必要性が低下 画面上部のボタンのコンバージョンが低下 ゲームなどの全画面イラストに、黒枠が出たり、見切れたりする グラフィッ
レイ・イナモト×古川裕也「世界のクリエイティブはどこに向かうのか」 #ブレーン | AdverTimes.（アドタイ） by 宣伝会議
2017年5月、編集部は電通のクリエーティブ・ボード古川裕也氏とともに、レイ・イナモト氏が代表を務めるInamoto & Co.のオフィスを訪問。日本と世界を代表するクリエイティブディレクターの2人に、「世界のクリエイティブはどこに向かうのか」「クリエイティブの仕事の働き方改革」について聞いた。 —今回は、お二人にまず「世界のクリエイティブはどこに向かうのか」についてお話をいただければと思います。 古川裕也：そのテーマは、レイさんの会社がまさに体現しようとしていることですよね。日本でも、電通から独立した岸勇希の刻キタル社は、それを体現しようとしています。2つの会社で共通しているのは、広告で培ってきたクリエイティビティを駆使して、広告以外のクリエイションをしようとしているところです。 レイ・イナモト：僕は独立して1年と少しですが、独立したことで経営者の方々と直接お話しをする機会が増えました。
UI考：なぜそのセルには押せる感があるのか - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この記事の目的 セル（UITableViewCell）は iOS においてもっとも一般的なビューのひとつです。セルを利用することで、コンテンツの表示、選択、スイッチやボタンの配置、テキストフィールド、ナビゲーションを実装することができます。この辺りの具体的な実装例は『設定』や『Apple Store』が参考になるでしょう。セルにはさまざまな役割を与えられますが、どのような作法に従ってデザインされているのかよく理解する必要があります。 セルの一般的な利用作法は iOS Human Interface Guidelines で解説されていま
iOS ヒューマンインターフェースの原則 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに iOS のヒューマンインターフェースを理解するためにはまず UI 設計の原則を定めた聖典 iOS Human Interface Guidelines を読むことから始めなければなりません。ここにはプラットフォームの特徴からデザインの原則、それぞれの部品が何のためにデザインされたのか、どう利用するのか、iOS を構成する UI の基本指針がまとまっています。 よく、『磨りガラス効果がかっこいい』『アニメーションしておくとイケてる』『ボタンは右配置の方が右手で押しやすい』『流行っているから』……などの観点によって UI の設計が
誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック
【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか？ ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの？ ・結局一番言いたいことはなんなの？ ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・
2016年のWebデザインを振り返る、年間アワードのおすすめ注目サイト35個まとめ
世界で注目されている現役の敏腕クリエイターが審査に参加した、新しい可能性を感じるアイデアやデザインのWebサイトを決める、Awwwardsの主催する年間アワード Annual Awards 2016が開催中です。 Annual Awards 2016は、6部門（今年のウェブサイトを決める The Site of the Year や、サイトの使いやすさやユーザビリティが完璧なサイトを決める Developer Site of the Year 、新しい技術を利用したユニークさを競う Experimental Innovative Site of the Year、デザイン性だけでなく使い勝手にもこだわるショッピングサイトを決める E-Commerce Site of the Year ）でノミネートが発表されています。 今回はその中でも特に印象的だった、魅力的なウェブサイトをまとめてご紹介
【2014.08.15 追記】"使える"モバイルアプリのUIプロトタイピングツール・サービス18個 - よりぶろ
2013年ふりかえりと2014年の予想でも書いたように、ここ1年でモバイルアプリのプロトタイプを作れるツール・サービスが数多く登場しています。 もうけっこうな数が出てきましたので、これからプロトタイピングを検討しようとしている方の参考に、また自分自身の把握のために、一度整理してみたいと思います。 なお、例によって後半は息切れ気味です。気付いたら1万文字近く書いてた… (2014.08.15)記事書いてから半年くらい経って、各種サービスもアップデートしたりがあったのでいろいろと追記しました プロトタイピングとは何か そもそもプロトタイピングって何ぞやというお話なのですが、Wikipediaにいい感じの解説が載っておりましたので転載します。 "プロトタイピング（Prototyping）とは、実働するモデル（プロトタイプ）を早期に製作する手法およびその過程を意味する。その目的は、設計を様々な観点
50 Great Examples of Data Visualization
Wrapping your brain around data online can be challenging, especially when dealing with huge volumes of information. And trying to find related content can also be difficult, depending on what data you're looking for. But data visualizations can make all of that much easier, allowing you to see the concepts that you're learning about in a more interesting, and often more useful manner. Below are 5
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
そこで改行？ | SDNA ローカライズチームブログ