これだけ守れば見やすくなるデザインの基礎
2019/04/18に株式会社gumi様で行ったデザイン講義のスライドです。 デザインとは何か？デザイナーは何を考えてデザインを作っているのか？ という話から、実際にデザインを評価・検討するための言葉を紹介しています。 この 作品 は クリエイティブ・コモンズ 表示 - 改変禁止 4.0 国際 ライセンスの下に提供されています。 第二回「UIデザインをはじめよう」はこちら https://speakerdeck.com/kinakobooster/uidezainwohazimeyou 第三回「今日からできるUXデザイン」はこちら https://speakerdeck.com/kinakobooster/jin-ri-karadekiruuxdezain ※訪問講座のご案内※ あなたの会社に話しに行きます。料金表はこちら https://xemono.life/#/workwith/co
デザインの基本日記 「配色編」｜Design Beginner
配色がうまくいかない場合の多くはたくさんの色をついつい使ってしまった結果招いていることが多い。まずは2色で配色をしてその上で少しずつ色の調整をすることによって、まとまりのあるデザインが作りやすくなる。 一般的に言われている配色は、ベースカラー7割、メインカラー2割、アクセントカラー1割。一番表現したいことをアクセントカラーにすることで表現したいことが何かはっきりわかりやすくなる。 なんとなく落ち着いていて物足りない場合、色相環で反対の色をアクセントカラーに持ってくるとインパクトがでる。この色相環の反対の色を反対色や補色といったりもする。 逆にガチャガチャして色がうるさい場合は、色相環の隣り合った色数色を選び配色することで全体的にまとまった印象になる。この色相環の近くにいる色のことを近似色と呼ぶ。 配色を決める場合、いくつかの軸があるが、何を表現しなければいけないかというテーマによって配色を
デザイナー向け認知科学／認知心理学の入門書 （2020.10.4追加編集）｜yoshi_design
はじめに若手のUIデザイナーから「使いやすいアプリをデザインするために認知心理学を勉強したい。どんな本を読んだらいいですか？」と相談を受けたので、いくつか紹介してみます。ちょうど、大学入試センター試験（国語）で「デザイン」や「アフォーダンス」が取り上げられたこともあり、このタイミングで書いてみることにしました。 認知心理学の学問分野は広大ですし、僕は認知心理学者ではありませんので、あくまでも、１）デザイナー向けに、２）仕事に役に立つ、３）入門書、 という観点で選びました（前半の入門編）。 （僕自身は、多摩美術大学の大学院生の時に、須永剛司教授（現・東京藝大）の研究室で、インタフェース・デザインの実践研究をしながら、文献や論文、ゼミの輪読、学会や勉強会などを通じて、認知科学／認知心理学を学び、それがその後のインタラクション研究に続いていきます。） 後半の中級〜上級編には名前がよく出てくる有名
【考えの伝え方】情報を視覚化してみよう！｜Goodpatch Blog グッドパッチブログ
自分の考えをうまく人に伝えられないことはありませんか？ 自分の頭の中にある考えやイメージを、直接相手の頭の中に送ることができれば簡単に伝えることができるかもしれませんが、そういうわけにもいきません。 ですが、直接送ることはできなくても、情報を視覚化することでより伝わりやすいように工夫することは可能です。 実際に身の回りでは、情報を伝えるために視覚化されたもので溢れています。 そこで今回は、考えを伝える1つの手段として、情報を図解して視覚化する方法をご紹介します。 「情報を視覚化する」とは？ 情報の視覚化とは、文字通り、情報（考えていることや伝えたいこと）を、図解表現などを用いて目に見える状態にすることです。 メリット 自分の思い描いているイメージや、言葉で明確に言い表すことができない事柄を目に見えるようにすることで、その情報の関係性や構造が的確に伝わります。 また、人は実際に目に見えるもの
とにかく雑に作れ
学生たちを見ていると、きちんと議論して、きちんと設計して、きちんと何かを作ろうとするみたいです。ときには副作用を考慮して、やっぱり作るのやめようかという話になり、再び議論に戻ることもあります。 ああ、もったいない、もったいない。私は適当な人間なので「なんてマジメなんだ、とりあえず何か作ればいいのに」と思います。デザイン思考ではそのことを「クイック＆ダーティプロトタイプ」と呼んだりしますが、それだとなんだかカッコよすぎるので、私は「雑に作れ」と言ってます。 でも、言葉だけでうまく伝わるはずもなく、「どうすれば雑に作れるのか？」と再び議論を始めたりするので、なかなか難しいところです。 それでも「締め切り」というのは効果的なもので、次回までに何かを発表しなければいけないとなると、「議論してばかりじゃ話が進まない！」となり、ある種の覚悟を決めて雑に作ってくれるようになります。 私が印象的だったのは
エンジニアがデザイン入門書を3冊買ってみたのでメモと雑感 - エンジニアをリングする
自分で何かWebアプリを作るときにデザインも自分である程度満足いくレベルのものをできるようになりたくて、今年に入ってからいくつかデザインの本を買いました。 感想と勉強になったことをまとめてみます。 ノンデザイナーズ・デザインブック ノンデザイナーズ・デザインブック [フルカラー新装増補版] 作者: Robin Williams,吉川典秀出版社/メーカー: 毎日コミュニケーションズ発売日: 2008/11/19メディア: 単行本（ソフトカバー）購入: 58人 クリック: 1,019回この商品を含むブログ (107件) を見る 定番・・・なんですかね。どこかでデザイン初学者向けにオススメされていたのをみて買ってみました。 とても教科書っぽいです。ただ文章は程よく砕けていて読みやすく、理論をベースに実際の例をたくさん挙げて説明されているのでとっつきやすいです。 特に参考になった章：7章 Usin
インフォグラフィックスの潮流 情報と図解の近代史 | アイデア - 世界のデザイン誌
インフォグラフィックスの潮流 情報と図解の近代史 Published: 2016-02-01 Price: 定価3,080円／2,800+tax jp yen ISBN 978-4-416-11549-7 ORDER Amazon.co.jp 「order」のリンクより(株)誠文堂新光社サイトのオンラインショッピングをご利用いただけます。送料やお支払いについての詳しい情報は、同サイトの案内に従ってください。 永原康史 著『インフォグラフィックスの潮流 情報と図解の近代史』の電子版がリリース！ 【電子書籍のご購入はこちら】 Kindle: www.amazon.co.jp/dp/B0811L94FS honto: honto.jp/ebook/pd_29999059 楽天ブックス: books.rakuten.co.jp/rk/031fa1d6c29b3f428fd71722fdd82110
日本語フォントの書体の選び方・組み合わせ方、そしてデザインする日本語タイポグラフィのテクニック
明日、いや今日からすぐに役立つ、日本語フォントの書体の選び方・組み合わせ方、そしてそれをどのようにデザインするのか、日本語タイポグラフィのテクニックを学べるスライドを紹介します。 スライドは、日本語デザイン研究会中部の勉強会でプレゼンされた日本語のタイポグラフィのスライドで、特別に掲載許可をいただきました。 DTPの勉強部屋（名古屋）で登壇しました 日本語デザイン研究会中部は、タイポグラフィの大切さと楽しさを伝えるため・学ぶための交流の場として結成されました。 スライドは全部で45ページ。 日本語の読ませるタイポグラフィについて、書体の選び方や組み合わせ方、実例とともにデザインのテクニック、どのように勉強すればよいのかまで掲載されています。
大林寛, コルシカ「学習まんが「アフォーダンス」」 | ÉKRITS / エクリ
冊子版 ストーリーはそのままに、まんがを全編描き直してフルカラーにアップデートした「新版」を販売しています。
デザイナーはなぜMS Pゴシックを使わないのか? - エディトリアルデザイナーに聞いてみた
デザインを語る上で重要な要素のひとつ、「フォント」。デザインを実際に手がける人だけでなく、それを見る多くの人にとってなじみ深いフォントとして、Windowsのプリインストールフォント「MS Pゴシック」は代表的なもののひとつかもしれません。 「MS Pゴシック」 「MS Pゴシック」は過去にマイナビニュースで実施した美大生の「お気に入りフォント」アンケートにも名前が挙がった実力派(?)ですが、実際に日々グラフィック/エディトリアルデザインを手がけているデザイナーの目には、この定番フォントはどう映るのでしょうか。 今回は、デザイン会社にてエディトリアルデザイン/Webのレイアウトデザインを手がけているSさんに、「MS Pゴシック」についての率直な思いを伺いました。 ――「MS Pゴシック」、デザイン業務で使うことはありますか? 私は主にエディトリアル(雑誌や書籍など)、グラフィック、Web領
誰のためのデザイン？増補・改訂版を読んだ - ninjinkun's diary
自分が最初に元の誰のためのデザイン?―認知科学者のデザイン原論 (新曜社認知科学選書)（初版はPOETと呼ばれている*1 ）を読んだのは十数年前でした。4月に出たこの改訂版を読み返してみて、改めて感銘を受けました（そして内容をほとんど忘れていたのに気づきました）。 内容としては、エモーショナル・デザイン―微笑を誘うモノたちのために 、複雑さと共に暮らす―デザインの挑戦など後の書籍で検討された内容が盛り込まれて、ノーマン著作の集大成になっています。 自分がこの改訂版で注目しているのは、「6章デザイン思考」の追加です。 6章デザイン思考 正しい問題を発見するのがデザインである として、そのための手段としてデザイン思考が解説されます。 具体的にフレームワークとして取り上げられている人間中心デザインプロセスを見てみると、 観察→アイデア創出→プロトタイピング→テスト→観察… というサイクルになって
新入社員必見！プレゼン資料の作り方からプレゼン方法の基礎まで学べる良質SlideShare11選
ビジネスシーンにおいてプレゼンをする機会は誰にでもあるのではないでしょうか。 プレゼンというと「商品を販売する行為」をイメージしがちですが、一口にプレゼンといってもお客様に提案をする時、自分の売り込みをしたい時以外にも、社内メンバーへの提案や上司を説得する際にもプレゼンは必須です。 つまり、プレゼン能力は全てのビジネスパーソンにとって無くてはならない能力なのです。そのための、プレゼン力をつけるためにはまず、基本的なルールを学びましょう。 今回は、世界的に有名なファイル共有サービス「SlideShare（スライドシェア）」より、プレゼン資料の作り方から実際のプレゼン方法まで学べる資料を11個厳選してご紹介します。 資料作成時には実際のプレゼンを想定し、伝えたいポイントだけを記載する必要がありますが、書きたいことを整理出来ず情報を詰め込んでしまいがちです。 このスライドでは、聞き手に伝わるプレ
プレゼンテーションに使う画像の探し方 - Qiita
勉強会、カンファレンスで使うプレゼンテーションをつくる際の画像の探し方。 一時期「プレゼンテーションZen」が話題になったように、大きな写真を使ったプレゼンテーション手法が使われることがあります。どのような手法であってもプレゼンテーションをより魅力的にするために、あるいは内容をより伝わりやすくするために視覚的なイメージを使うことは有効な手段だと思います。 いざ画像を探そうって時に、自分の持っている画像で事足りれば問題ないのですが、だいたいそうじゃないからけっこう画像探しって困ってしまいますよね。 ということで、普段私が画像を探す際に利用しているサイトをご紹介します。 権利関係については以下をご一読いただけるといいと思います。 クリエリティブコモンズライセンスとは 結局これだけあればなんとかなるセット【更新】 詳細については各サイトの指示に従い、自己責任でご使用ください! Unsplash
iCloudの利用規約に隠れたメッセージを浮かび上がらせるとこうなる
インターネットでサービスを利用したり、ソフトウェアをインストールしたりするときに必ずといっていいほど表示されるのが「利用規約」ですが、長すぎる利用規約の隅から隅までに目を通してから「同意する」にチェックを入れる人は少ないもの。しかし、アーティストのFlorence Meunierさんは、独自の手法でiCloudの利用規約に隠されたメッセージを浮かび上がらせ、利用規約の重要性について説いています。 FPO: "The Man who Agreed - Apple Terms and Conditions" Booklet http://www.underconsideration.com/fpo/archives/2015/01/the-man-who-agreed---apple-terms-and-conditions.php 黒いラインで文章が塗りつぶされた冊子の表紙。塗りつぶされてい
絶対に描いてはいけないグラフ入りスライド24枚 -slideshare
These slides include many inappropriate graphs. If you want to tell the summary of the data correctly, you should avoid to use graphs in this presentation. They can mislead those who view them. In English, the title of presentaion is "24 slides including graphs that should not be absolutely drawn".Read less
櫻田潤 | インフォグラフィック・エディター
ビジュアルの力で世界を丸くする。 地球の形状が「丸い」のは、そこで暮らす僕たちにひとつの「ビジョン」を指し示しています。地球の形と同じように、世界で起こっていることのすべてが丸く収まっていれば良いのですが、現実は違います。 大小いろいろな規模の摩擦がいたるところに発生し、繰り返されます。その解決に必要なのは、お互いの「考え」や「価値観」「立場」、「状況」「状態」を示し、認め合うことです。そのために、「ビジュアル」の力を活用していきます。
早稲田大学のサイトリニューアルはなぜスゴイのか？
2014年11月5日(水)、早稲田大学公式サイトが、株式会社CINRAの手により、見事なリニューアルを遂げました。 プレスリリースに書かれた彼らの目論見通り、「国内外の大学と一線を画す、最新のグローバルサイト」と言えると思いますが、なぜ、国内屈指の大規模校である早稲田の公式が、ここまで個性的なサイトになっていると感じるのでしょうか。 日々大学サイトの構築に向き合うWebディレクターの立場から、その「スゴイ」理由を、少し考えてみました。 1 – 「メディアサイト」として尖らせたから 一般的に大学サイトは、ある程度メニュー内容も共通化され、情報公開に重きを置いた「ポータルサイト」として位置づけられることが多いと思います。 しかし、新しい早稲田のサイトは、細かいコンテンツは「別サイト」に任せ、新着記事とリンク集で構成される「メディアサイト」に大きく振ってきました。 海外大学サイトでは「News」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
よくわかるダメUI/UX画像コレクション - DOCUMENTS.TIPS
ログイン - はてな
tanpopoya : 素材配布ページ