タグ

デザインに関するji_kuのブックマーク (126)

  • チーム開発で暗黙的に行なわれている批評というプロセス - snoozer05's blog

    Pull Request を通して行うコミュニケーションに「レビュー」という言葉がつくことに違和感を感じるときがあります。 Wikipediaコードレビューを引くと、「見過ごされた誤りを検出・修正することを目的として体系的な検査(査読)を行う作業 」とあります。もちろん、これを目的として行うやり取りもあるのですが、その手前の「コードや設計について議論し、もっと良い判断を探る」ために行うコミュニケーションもあると思います。むしろ、そちらのコミュニケーションをやりやすいことが、Pull Request というプラットフォームが提供する価値なのではと感じることが多いのが、違和感の元かもしれません。 2015年6月に O'Reilly から出版された「Discussing Design: Improving Communication and Collaboration through Crit

    チーム開発で暗黙的に行なわれている批評というプロセス - snoozer05's blog
  • Webデザインのプロのテクニックを非常に簡潔に分かりやすくまとめた -Web Design in 4 minutes

    Webページやブログ、プロダクトページ、ポートフォリオなど、ちょっとした工夫でプロがつくったかのようにかっこよく、魅力的に見せるテクニックを4分で学べるコンテンツを紹介します。

    Webデザインのプロのテクニックを非常に簡潔に分かりやすくまとめた -Web Design in 4 minutes
  • いい仕事をしよう // Speaker Deck

    UICrunch #9 に登壇させていただいたときの資料です。デザイナーに求められるデザインスキルとは、というテーマに対して、「仕事」という切り口でお話させていただきました。やっぱり人間は「いい仕事」をしたい生き物です。いい仕事ができれば、ビジネスを最大化できると信じています。それを紐解くスライドです。 弊社ブログでも事例を丁寧にまとめておりますので、ご覧ください。 http://memo.goodpatch.co/2016/07/ticketcamp/

    いい仕事をしよう // Speaker Deck
  • なぜ日本人がデザインするとグチャグチャになるの? : 哲学ニュースnwk

    2016年07月29日22:30 なぜ日人がデザインするとグチャグチャになるの? Tweet 1: 以下、\(^o^)/でVIPがお送りします 2016/07/28(木) 23:59:25.564 ID:o0MJ4gQd0 転載元:http://viper.2ch.sc/test/read.cgi/news4vip/1469717965/ ワイ将、「リゾートバイト」を読み戦慄 http://blog.livedoor.jp/nwknews/archives/5076530.html 外国 こういうのまじでくそ 2: 以下、\(^o^)/でVIPがお送りします 2016/07/29(金) 00:01:16.499 ID:jMk65bEv0 それが日らしさでもある いつまで経っても埋まらない電柱のある景色も日らしさの一つ 3: 以下、\(^o^)/でVIPがお送りします 2016/

    なぜ日本人がデザインするとグチャグチャになるの? : 哲学ニュースnwk
  • その文字、薄すぎない? デザインにおける灰色の明度は何%が最適か

    UX Movementにおいて記者、編集長を務めます。明快で効果的なデザインに美点を見出し、利用者のために払う労力を惜しみません。 一言で灰色と言っても、明るいものもあれば暗いものもあり、実に様々なバリエーションがあります。Webサイトなどでは、いたるところでお目にかかることのできる色でもあります。濃い灰色は主に見出しや文に、薄い灰色はメタデータ、分類名、説明文に多く使われます。これらの色合いのうち、最も乱用されるのは薄い灰色です。 薄い灰色の文字の問題点 文字色として薄すぎる灰色は可読性に問題を起こしかねません。灰色の文字を薄くしすぎてしまえば、読者が読むにあたって支障をきたすことになります。文字の明度によっては、薄い色の背景に混ざってしまうのです。この現象は、単語や文字をぼやけさせ、判読を困難にします。無理に判読を試みれば、目を傷めてしまうでしょう。 また、薄い灰色の文字は読者の誘導

    その文字、薄すぎない? デザインにおける灰色の明度は何%が最適か
  • 【2016年上半期】ウェブデザイナーが注目したい、本当に流行中のWebデザイントレンド5つ

    Medium で公開された「5 Actual Web Designs Trends for 2016」 by Nils Sköldの許可をもらい、日語抄訳しています。 This article is translated from Medium (https://medium.com/). 「いつの間にか気付いたら、2016年も半分を過ぎていた。」そんなひとも少なくないかもしれません。今回は上半期の総集編として、ウェブデザイナーが押さえておきたい、実際に流行っているWebデザイントレンド5つを、サンプル実例サイトと一緒に見ていきましょう。 01. フルスクリーン表示 + スクロールなし。 スクロールしないウェブデザインが、いよいよ人気となりはじめているようです。ヘッダーの一番上にアンカーリンクを固定し、下方向にスクロールを促す単一ページのウェブサイトは、ホームページ作成のスタンダードと言

    【2016年上半期】ウェブデザイナーが注目したい、本当に流行中のWebデザイントレンド5つ
  • Atomic Designの考え方と利点・欠点 – wkr.

    Atomic Design はデザインシステムを作る方法論となります。 デザインシステムというのはスタイルガイドやブランドのガイドラインなどを指すようです。 日だとAbemaTV(アベマ TV)で使われています。 (Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物 | ygoto3.comより) Atomic Design は今までのページ単位と違いコンポーネント単位でデザインカンプを作る考え方です。 作ったコンポーネント同士の組み合わせでページを作ります。 Atomic Design はコンポーネントの単位を 5 つに分けています。 その 5 つの単位は Atoms(原子)・Molecules(分子)・Organisms(有機体)・Templates(テンプレート)・Pages(ページ)です。 各コンポーネントの詳細は次のとおりです。

    Atomic Designの考え方と利点・欠点 – wkr.
  • WebエンジニアのためのWebサービスデザイン実践講座

    DeNA 社内勉強会に呼んでいただいて、お話させていただきました。 Reviewに登場していただいてるサービスはこちらです。 動く小説投稿サイト Denkinovel by @katryo さん http://denkinovel.com/ ご協力ありがとうございました( ˘ω˘)

    WebエンジニアのためのWebサービスデザイン実践講座
  • 黄金比について詳しく解説、レイアウトや構図に効果的に取り入れるデザインテクニックのまとめ

    黄金比や黄金螺旋を使い、Webサイト、雑誌や同人誌の表紙、フライヤーなどのレイアウト、コンテンツの配置、余白のとり方、写真の構図、オブジェクトの形のデザインにうまく取り入れるデザインテクニックを紹介します。 以前に1,000ブクマ越えの「黄金比をサイトのデザインに取り入れる簡単な3つの方法」を記事にしましたが、黄金比の取り入れ方もいろいろ進化しています! What Is The Golden Ratio? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 黄金比(Golden Ratio)とは 1. 黄金比をレイアウトに使う 2. 黄金比をスペースに使う 3. 黄金比をコンテンツに使う 4. 黄金比を写真の構図に使う 5. 黄金比を形に使う エジプトのピラミッド、ダヴィンチのモナリザ、これらとTwitterやペプシのロゴとの共通点は何で

    黄金比について詳しく解説、レイアウトや構図に効果的に取り入れるデザインテクニックのまとめ
  • フリーランスデザイナーの「つくること、はたらくこと」 - Speaker Deck

    Transcript ϑϦʔϥϯεσβΠφʔͷ � ʮͭ͘ Δ͜ͱɺ ͸ͨΒ ͘ ͜ͱʯ ࣗݾ঺հ ͢Έͩ͋΍͔ ʢ֯ాҁՂʣ 8FCσβΠ ϯˍΠ ϥε τ Ϩʔλʔ େࡕࡏॅɺ ੍࡞ձࣾͰͷ8FCσβΠφʔΛܦͯ����೥ʹϑϦʔϥ ϯεʹɻ ओʹ-1΍αΠ τͷσβΠϯɺ ΠϥετΛ੍࡞͍ͯ͠·͢ɻ ෉ ͱ�ࡀͷஉͷࢠͱ ͏͕͗͞�ඖ͍·͢ɻ Ωϟ ϦΞ͚ͩ͸ ��೥ʹ ɾ ɾ ɾ ࠓ೔ͷ͓͠ͳ͕͖ σβΠϯΛ࡞Δ ʮཧ࿦ʯ ͱ ʮϏδϡΞϧʯ � ཧ࿦ฤ � ϏδϡΞϧฤ � σβΠϯͷઆ໌ฤ ϑϦʔϥϯεͱͯ͠ಇ͘ Θͨ͠ͷ৺ಘ 01 02 ࠓ೔ͷͶΒ͍ ࠓ೔ͷςʔϚ͸ ʮσβΠϯࡇʯ ɻ ʮσβΠϯ͸໰୊ղܾʯ ͜ͷ͜ͱ͹Λͣͬͱ؊ʹ໏͡ ͖͚ͯͨΕͲɺ ࠷ۙͲ͏΋ͬ͘͠ Γ͜ͳ͍ɻ ࠓ೔ͷͶΒ͍ ݟͨ໨͚͕ͩσβΠϯ͡Όͳ͍ɺ Ͱ΋σβΠϯͷத Ͱɺ ͖Ε͍ͳ৭ɺ ͖ͯ͢ͳϑ

    フリーランスデザイナーの「つくること、はたらくこと」 - Speaker Deck
  • 【初心者向け】誰でもできるデザインの7つの基本でWeb制作・ブログ運営・資料作成をより創造的に - Life is colourful.

    世の中はデザインで溢れている。ブログを運営するとき、会社で資料を作るとき、普段の生活の中でも結構「デザインする」ことに直面する場面は多い。キレイで便利なテンプレートやテーマを使えば済む話だけれど、素人やデザイン初心者でも、少しでもデザインに関する意識があれば、仕事だけでなくプライベートでも応用がきくし、思考の幅も広がって楽しい。 デザインするということは何も特別なことではなく、一握りの絵心のある人が特殊なグラフィックツールや生まれ持ったセンス用いて、創造的な作品を生み出すことだけを意味するわけではない。 誰でもできるデザインもある。 そしてそれは、ちょっとした知識があって、何かを作るときにほんの少し気をつければいいだけの作業である。(このエントリーでいう「デザイン」とは、そういうものと定義する。) この記事では、デザイン初心者に向けて、デザインの簡単な7つの基を紹介してみる。実際にこの7

    【初心者向け】誰でもできるデザインの7つの基本でWeb制作・ブログ運営・資料作成をより創造的に - Life is colourful.
  • シンプルの心理学 ― 心地良いデザインのために | POSTD

    私たちの誰もが理解する”シンプル”という概念の正体を突き止めることは、難しそうに見えますが、実はそうでもありません。 私たちが製品やWebサイトをシンプルと感じるかどうかの背景には、”見れば分かる”ということだけではなく、単なる直観的な反応にとどまらない何かがあります。 Steve Jobs は次のように述べています。 シンプルであることは、複雑であることより難しい場合がある。物事をシンプルにするためには、思考を整理して懸命に考えなくてはならない。しかし、努力する価値はある。ひとたび達成すれば、山をも動かすことができるのだから。 シンプルにものを作ることにそんなに力があるのであれば、なぜ私たちはそうできないのでしょうか。 なぜシンプルであることは、こうも複雑なのでしょうか。 人生における多くの事柄と同じように、シンプルさには表面的に見えている以上の何かがあります。ここでは、私たちの脳が新し

    シンプルの心理学 ― 心地良いデザインのために | POSTD
  • 人間の行動を促すコツは「名詞化」にあり:研究結果 | ライフハッカー・ジャパン

    Inc.:人間の認知バイアスを列挙したリストを見ると、その長さに驚きます。「利用可能性ヒューリスティック」から、「ツァイガルニク効果」まで、このリストに並んだものをざっと見ただけで、「私たち人間には論理的な決断は下せない」とか「合理的な計画など立てられるはずがない」と絶望してしまうでしょう。 でも、案ずることはありません。私たちの脳は得体の知れないマシンかもしれませんが、その特性を知ることで、こうしたバイアスの多くを、良いほうにも悪いほうにも利用できるのです。もしかしたら、公共政策の領域でバイアスを活用した有名な事例を読んだことがある方もいらっしゃるのではないでしょうか。たとえば、臓器提供に関してオプトイン型ではなくオプトアウト型を採用した例があります(臓器提供をはっきり拒否した場合のみ摘出を断念するのが「オプトアウト型」、提供をはっきりと認めた場合のみ摘出するのが「オプトイン型」。日

    人間の行動を促すコツは「名詞化」にあり:研究結果 | ライフハッカー・ジャパン
  • 新人Webデザイナーへ向けた、考え方から実践までの話 | Web制作に関するブログ | 株式会社シロクロ

    Web制作会社 シロクロ Web制作に関するブログ新人Webデザイナーへ向けた、考え方から実践までの話 新人Webデザイナーへ向けた、考え方から実践までの話 2016年6月15日 Webデザイナーとしての心構え、普段やるべきこと、実際にデザインするときの手順など、弊社の新人デザイナーに伝えていることをまとめました。学生や新人Webデザイナーの方に役立てていただければ幸いです。※ディレクターが打ち合わせやワイヤーフレーム制作などを担当し、デザイナーは純粋に画面を作る役割として話を進めます。 はじめに何のためのデザインか色んなWebサイトを見ることWebサイトを模写することデザインする前にWebサイトの目的/目標を理解する同業他社のWebサイトを調べるワイヤーフレームのままデザインしないデザイン作業時世界観(トーン&マナー)とレイアウトを決める文字、色、装飾、余白のルールを決める必要であれば構

    新人Webデザイナーへ向けた、考え方から実践までの話 | Web制作に関するブログ | 株式会社シロクロ
  • 構図とレイアウト

    アニメ私塾 @animesijyuku 《目線誘導の作り方》 ①簡単な図形の明暗でも目線は誘導される ②自然物のディテールを描き足す過程でも目線誘導を意識する ③ハの字で挟むと中心に目線誘導しやすい ④モブはひと塊りで配置する見せたいキャラ周辺にスキマを作ると目線が行きやすい pic.twitter.com/me6X6l8Fd1 2017-01-31 23:13:29

    構図とレイアウト
  • デザインは「課題解決の設計」トレタのデザインプロセスに学ぶ、デザイナーの役割とは | SELECK

    今回のソリューション:【GitHub、Trello、Sketch、Flinto・他】 〜「デザイナーがプロダクトマネジャー」という意識を大切にする、トレタのデザインプロセスの全貌を公開〜 事業開発において、デザイナーと、デザインそのものが成すべき役割とは何か。それぞれの企業が「デザイン」をどう捉えているかは、そのデザイン・開発プロセスを知ることで明らかになる。 飲店向け予約・顧客台帳サービス「トレタ」を運営する、株式会社トレタ。同社では、デザイナーをプロダクトマネージャーのような立ち位置に置き、「課題解決の設計」が役割であると定義している。 デザイナーが要件定義の段階から仮説検証、フィードバックに関わることで、プロダクトをより良くすることを目指しているのだ。 デザイナー出身者がプロダクトマネージャーの役割を担うようになっていくのは、ひとつの自然な流れだと話す、同社でCCO(最高クリエイテ

    デザインは「課題解決の設計」トレタのデザインプロセスに学ぶ、デザイナーの役割とは | SELECK
  • 魅力的な名刺を作成するデザインアイデア50個まとめ完全版

    仕事のあらゆるシチュエーションで必要になる名刺。みんなが持っているからこそ、自分だけのオリジナル性をデザインで表現してみましょう。会話のきっかけにもなり、仕事もうまく進むかもしれません。 今回は、名刺を作成するときにチェックしたい、50個のデザインポイントをすべてまとめています。気に入ったポイントを、デザインに加えてみてはいかがでしょう。同時に、オンラインデザインツール Canva で無料編集できる、名刺用テンプレートも揃えています。こちらも参考にどうぞ。 目次 すっきり、プロフェッショナルに。 透明に色を加えよう。 型破りにいこう。 エレガントな形を使おう。 曲線カーブを利用しよう。 ゴージャスに仕上げよう。 個性を加えよう。 楽しく、形式ばらずに。 レタープレスで奥行きを。 コントラストのはっきりとした配色を。 透明の面白い仕掛けを考えよう。 デザインに専門性を加えよう。 向きを変えて

    魅力的な名刺を作成するデザインアイデア50個まとめ完全版
  • デザイナーはなぜMS Pゴシックを使わないのか? - エディトリアルデザイナーに聞いてみた

    デザインを語る上で重要な要素のひとつ、「フォント」。デザインを実際に手がける人だけでなく、それを見る多くの人にとってなじみ深いフォントとして、Windowsのプリインストールフォント「MS Pゴシック」は代表的なもののひとつかもしれません。 「MS Pゴシック」 「MS Pゴシック」は過去にマイナビニュースで実施した美大生の「お気に入りフォント」アンケートにも名前が挙がった実力派(?)ですが、実際に日々グラフィック/エディトリアルデザインを手がけているデザイナーの目には、この定番フォントはどう映るのでしょうか。 今回は、デザイン会社にてエディトリアルデザイン/Webのレイアウトデザインを手がけているSさんに、「MS Pゴシック」についての率直な思いを伺いました。 ――「MS Pゴシック」、デザイン業務で使うことはありますか? 私は主にエディトリアル(雑誌や書籍など)、グラフィック、Web領

    デザイナーはなぜMS Pゴシックを使わないのか? - エディトリアルデザイナーに聞いてみた
  • サイトのデザインを変更しただけで約50%もユーザーを失った失敗例

    By Wicker Paradise アイコンに関するニュースから販売まで手がけるサービス「Icons8」の中の人が、ウェブサイトのデザインを大幅に変更したところ47%ものユーザーを失ったことをブログで明らかにしました。ブログではユーザーを失うまでの経緯や、なぜ失ってしまったのかの分析結果まで書かれていて、興味深い内容になっています。 How We Lost 47% of Our Users After a Redesign | Icons8 https://icons8.com/articles/how-we-lost-47-of-our-users-after-a-redesign/ サービス開始当初、Icons8はアイコンの開発・販売を手がけるサービスでしたが、毎日新しいアイコンを作り続けるのには無理があるため、「リクエストアイコン」という機能を実装しました。リクエストアイコンとは、

    サイトのデザインを変更しただけで約50%もユーザーを失った失敗例
  • 7つの実例で学ぶ「ワイヤーフレーム通り」のデザインから脱却する具体的な方法

    「ちょっと〇〇君!これワイヤーフレームそのままじゃない!」 Webデザイナーなら、できることなら聞きたくないセリフですよね。私自身ももれなく、こう言われた経験はありますし、逆に後輩に対して同じく「これだとワイヤーフレームのまんますぎるね。。」と伝えたこともあります。 この「ワイヤーフレーム通り問題」は、Webデザイナーなら誰しも一度は経験するあるあるの一つと言えますが、なぜ「ワイヤーフレーム通り」と言われてしまうのでしょうか。また具体的に何をすれば、ワイヤーフレーム通りではなくなるのでしょうか。今回はそのあたりの原因と対処方法を考えてみたいと思います。 「ビジュアルを作る力」と「情報を理解・提案する力」 ズバリ結論を言いますが、ワイヤーフレーム通りじゃん…と言われてしまう人は「ビジュアルを作る力」と「情報を理解・提案する力」が弱いと言えます。 ビジュアルを作る力は幅広い表現の中から適切な手

    7つの実例で学ぶ「ワイヤーフレーム通り」のデザインから脱却する具体的な方法