[デザインが苦手なウェブディレクター向け] これだけ覚えればデザイナーに指示できる！アートディレクション15の定番パターン｜金 成奎
[デザインが苦手なウェブディレクター向け] これだけ覚えればデザイナーに指示できる！アートディレクション15の定番パターン ウェブデザイナーが作った成果物に対して、満足はしていないのだけどうまく言語化できなくてどうやって指示したらいいか分からない、あるいはクライアントからのフィードバックをどう咀嚼して伝えていいか分からない、結果的にデザイナーを上手くディレクションできていない.......。そんなお悩みをもったウェブディレクターいませんか？ ここでは実際のデザインを見た時に感じること・あるいはクライアントが指摘しがちなことについての「あるある」を、15の事例に集約してまとめてみました。デザイナーとコミュニケーションしてデザインをブラッシュアップする上での、ある種のアートディレクションの手引きとして活用してもらえればと思います。 1.「野暮ったい」と感じたら・言われたら。 「野暮ったい」とは
![[デザインが苦手なウェブディレクター向け] これだけ覚えればデザイナーに指示できる！アートディレクション15の定番パターン｜金 成奎](https://cdn-ak-scissors.b.st-hatena.com/image/square/0aa50796295af9d9e533b4f2f4683522dbc45cd4/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F13031716%2Frectangle_large_type_2_0cfda3162d1aa8bb9571cecf5ec1f1e0.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280)
Webサイトのメインビジュアルの構図を集めて分析してみた。｜ameko
初めまして、ameko(@tk04amedama)と申します。 普段は都内の制作会社でWEBデザイナーをしています。 と言ってもまだまだ新米なので、日々勉強中です。 その勉強の一環で、最近のWebサイトで使われている メインビジュアルの構図を一覧にしてまとめた画像をTwitterに投稿してみたところ、思いがけず多くの方に反応いただけたので、その後に行っていた構図ごとの分類分けや分析も公開してみようと思い、初めてnoteに投稿してみました。 はじめに集めたサイトの数は全部で７０個。自分の仕事の参考のために集めたものなのでほとんどがBtoB向けサイトです。（BtoC向けサイトだと、この構図一覧もまた、全然違うものになりそうだなと思う。） 構図の名前は、なんとなく自分なりに語呂がいい名前をつけているだけなので、あまり突っ込まずふんわり流していただけると幸いです。（もしこの構図の正式名称とかあった
Dribbble - Show and tell for designers
Discover the world’s top designers Explore work from the most talented and accomplished designers ready to take on your next project
Jennifer Dewalt | 180 Websites
Hi! I'm Jennifer Dewalt and I am making 180 websites in 180 days. You can follow the project here and on the blog. Today's Website Hello World! Day 180 Hello World! Day 179 All Draw Day 178 How We're Feeling Day 177 One Drawing Day 176 Color Jam Day 175 Buggy Day 174 Talking Dude Day 173 Paths Day 172 Chromatones Day 171 Quick Compliments Day 170 GFBOOM! Day 169 Electro Bounce Day 168 Polychrome D
“お金”のインタラクションデザインの作り方｜ohs / Pilll ピルリマインダーアプリ
こんにちは。マネーフォワードで自動貯金サービス『しらたま』のPO/デザイナーをしているohsです。 少し前ですが、【Fintechデザイナー反省会】というイベントに登壇させてもらいました。 その時にお話した実物の貯金箱感覚をアプリ内で表現した部分について、質問など頂いたので、アプリ内のインタラクションについて紹介しようかと思います。（今更感ですんません😅） 他の登壇者の坪田さん、神崎さん、広野さんの話も同じお金を扱うサービスでも全く違う視点での話で面白かったのでオススメです。 これはどんなnote？📒 しらたま内で使っているインタラクションについて、どうやってこの動きが生まれたのかのプロセスと、なぜそこにこだわったかの紹介します。 そもそもしらたまって何？しらたまは、「しらずに、たまる」人生を楽しむ貯金アプリです。 貯金をする・出来るようになるだけではなく、「貯まったお金をどう使うか体
光と影の彩度のお話｜高原さと
<コンセプトアートの現場v15> 子供向けで、明るい色の作品の場合の彩度の選び方。 画面を鮮やかにしたい。だが眩しいのは困る。濁った印象にもしたくない。 そんな時は光側と影側の、一方の彩度を高くし、もう一方の彩度を低くするといい。自分のように色の感覚が弱い人はテクニックで補完しよう。 pic.twitter.com/ASMEjiaEkh — 高原さと,SatoTakahara (@ART_takahara) May 20, 2018 同じことを言っている人を以前に見たことがあったので、まあみんな知っているだろうと思ってはいたんですが、一応投稿してみました。 そしたら思った以上に反響をいただきました。「分かりやすい」とか「勉強になります」とか「目から鱗です」とか役に立ったというコメントをたくさんいただけました。あとツイートを見て「それって明度じゃないの？」という疑問もいただきました。ありがと
人はなぜ「分かりやすいデザイン」でも失敗するのか｜Tsutomu Sogitani
これは私が最近よく訪問する日本橋駅直結の商業ビル、東京日本橋ビル内のエレベーターのボタンです。 唐突に質問ですが、このボタンで操作ミスを起こすポイントがあるとすれば、それがどこだか分かりますか？ 説明が必要と思いますが、このビルは7Fがオフィスロビーになっています。駅直結のB1と1Fからは7Fまで直通するシャトルエレベーターがあり、全員7Fで一度降り、セキュリティチェックをし、23Fより上にあるオフィスフロアに入ります。そのオフィスロビーとオフィスフロアを行き来するためのエレベーターのボタンがこれです。 ボタンが23Fから30Fまでしかなくて、下に大きく7Fのボタンがあるのは、そういったビルの構造からです。 私と同行したディレクター（26歳）は、打ち合わせが終わってオフィスフロアからオフィスロビーに帰る際に、操作ミスをしました。それも1度だけでありません。次の打ち合わせの帰りにもまったく同
Web制作者がチェックしておきたい、最近のWebサイトで注目されているデザインのトレンド -2018年3,4月 | コリス
デザインや実装で悩んだ時には、世界のクリエイターの間で注目されている新鮮なトレンドを見てみると良いインスピレーションに出会うことができます。最近のWebサイトで注目されているデザインのトレンドを紹介します。 自分にはない発想を見かけると、なんだか楽しくなりますよね。 3 Essential Design Trends, March 2018 3 Essential Design Trends, April 2018 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ナビゲーションを表示しないトップページ -ポスタースタイル 02. Ultra Violetのカラーパレット 03. グラデーションとテキスト 04. 泡のような柔らかい塊 -バブル アンド ブロブ 05. 浮遊している矩形 -フローティング レクタングル 06
黄金比をサイトのデザインに取り入れる簡単な３つの方法 | コリス
その調和された比率は、トランプカードなどの日常的なものから、ギリシアのパルテノン神殿、ミロのヴィーナス、モナリザなどの芸術分野まで、多数存在します。 黄金比を使ったデザイン テクニックついては、下記も参考にどうぞ。 黄金比とは、黄金比を使ったすごいデザインテクニックのまとめ -Webデザイン・紙デザインに 黄金比を矩形に使用する 黄金比をマージンに使用する 黄金比をパーツに使用する 黄金比を矩形に使用する サイトで使用する画像などの矩形に黄金比を適応します。 サンプルでは、144pxと233pxの組み合わせを使用していますが、「1:1.6」を利用して100pxと160pxなど簡易なものでも効果はあると思います。 黄金比を横長の矩形に使用 黄金比をマージンに使用する レイアウトにグリッドシステムを取り入れマージンを使用した場合、数種類のサイズが必要になる場合が多くあります。 その際、１つの値
錯視から補正しよう！ユーザーの違和感を取り除くデザインの微調整 | ジーニアスブログ – WEB制作会社ジーニアスウェブのお役立ちブログ
こんにちは、鶴川です。 デザインは綺麗に整えているはずなのに、凹んで見えたり、ずれて見えたり、薄く見えたり・・・不思議な「もやもや」を感じたことありませんか？ これらは大抵、脳が錯覚（錯視）を起こしている状態で起こるものです。 今回はWEBデザインで錯視を起こしがちなパーツとその補正について紹介いたします。 錯視とは？ 俗に「目の錯覚」と呼ばれ、視覚が正常であるにも関わらず、目から得た情報を脳が補完を加えたり、バランスを取ろうと処理し、実際と異なる情報として認識してしまうことです。 例として、 ・直線が歪んで見える ・同じ色が違う色に見える ・動いていないのに動いて見える というような現象があります。 WEBデザインにおいても、図らずしも錯視を起こしてしまいがちなパーツデザインがあります。 1. 色の面積効果による錯視 明るい色は面積が大きくなるとより明度と彩度が高く感じられ、暗い色は面積
デザイナーに言われた「非デザイナーが気をつけるべきデザインの4原則」 - Qiita
ウェブサイトやアプリケーション制作の現場で、非デザイナーが度々デザイナーからフィードバックをもらう内容をアバウトに4原則にまとめました。デザインは理論だそうで、以下に挙げるようなポイントさえ抑えれば非デザイナーでも「ハズさない」デザインをつくることができます(デザイナー談)。 追記[09/23/2015]：参考文献について 本記事は以下に掲載しております参考文献「ノンデザイナーズ・デザインブック(Robin Williams)」の前半部分における要所を引用して作成しています。デザイナーの方が非デザイナーにアドバイスする際に非常に有用な本らしく、私自身受けたフィードバックもこの本の内容に基づくものでした。予想していた数百倍の反響があり心底ビビっていますが、これをきっかけにデザインに興味をもち更に自分で勉強していくきっかけとなれれば本望です。わかりやすくデザインのポイントをまとめてくれた参考文
Webデザインの参考にしたい、ファーストビューのアイデアその2
作成：2018/05/14 更新：2018/05/15 Webデザイン > 今年はスプリットスクリーンや一部をレイヤーさせる見せ方を見るようになりました。（参考：2018年に使いたいWebデザイントレンド ！ファーストビューのアイデア集）今回は、周辺に余白をつかったものなど、少し違うアプローチのファーストビューのアイデアをまとめました。提案前に見ておきましょう。 エンジニア速報は Twitter の@commteで配信しています。 2018年微増しているレイアウトの傾向 最近少しづつ増えてきたレイアウトは ファーストビュー周辺に余白を取り入れる 余白の中にメニュー等を配置 縦、横に分割 画像と文字を不規則にレイヤーさせる 整列を一部崩している フェードやスライド以外の複雑なエフェクト といったところでしょうか。それでは少し例を見てみましょう。 横にセパレート 縦に分割するスプリットスクリー
2018年流行カラー決定！すみれ色「Ultra Violet ウルトラ・バイオレット」を使った参考カラーパレット
色見本帳の作成で、世界的に知られているパントン（PANTONE）社が、2018年の流行カラー、すみれ色「ウルトラ・バイオレット」（Ultra Violet 18-3838）を発表しました。 2018年の流行カラーは、独創的で想像力豊かで、未来への道を切り開くカラーリングが特徴となっています。 PANTONE今年の色をまとめたカラー見本帳 2000〜2017年（CMYK・RBG・HEXコード収録） 2018年の流行カラー、すみれ色「Ultra Violet ウルトラ・バイオレット」 2018年の流行カラーに選ばれた「ウルトラ・バイオレット」は、日本でいうスミレ色で、ドラマチックでじっくり考えぬいた紫色の色合いで、独創性や創意工夫、先見性を伝えることができるカラーリングです。 これまでにも紫色は、芸術的な輝くを象徴するカラーリングとして、デヴィッド・ボウイやジミ・ヘンドリックスなどの音楽アーテ
CSS・デザインツールはコレがおすすめ | ブログ | コーディング代行・外注サービスなら即日対応のくまweb
ホームページを使って集客・PRするためには、見やすく美しい装飾が必要です。 ホームページを美しく装飾するためには、CSSのスキル・デザインツールなどを使用します。 「CSSの使い方があんまりわからない..」や「どんなデザインツールを使えばよいのかわからない」という人もいるでしょう。 今回は、そのような悩みを抱えている人のためにCSSのツールやデザインツールなどを紹介します。 ホームページを制作・リニューアルしたい人は、ぜひ参考にしてください。 CSSツール まずはCSSのツールから紹介します。 CSS3 Generator カラー設定・色合いなどを簡単に調整できるCSSツールです。 完成したイメージを見ながら調整できるのが、便利なポイント。 制作したCSSコードは、コピーして貼り付けるだけで使えます。 制作したコードは、WEBブラウザはもちろん、Android・iOSなどにも使用可能です。
【コレで完璧】おすすめのWebデザインとツール | ブログ | コーディング代行・外注サービスなら即日対応のくまweb
Webサイト制作において、大切なのがデザインです。 デザインによってPV数などが大きく変動します。 ターゲットとなるユーザーの属性やサイトを運営する目的によって最適なWebサイトのデザインが違います。 金融機関などのホームページは誠実や信頼をアピールするために、重厚感のあるデザインです。 IT企業やベンチャー企業などは、遊び心のある奇抜なデザインを採用している会社もあります。 今回は、様々なWebサイトデザインとデザインで役に立つツールを紹介します。 「変わったWebサイトのデザインを知りたい」、「Webサイトのデザインで役に立つツールを知りたい」という人は、ぜひ参考にしてください。 参考になるデザインまとめサイト 参考になるWebサイトデザインまとめているサイトを紹介します。 「とにかく色々なデザインを見たい」という人はこのようなサイトから置きにするのデザインを探してみてください。 MU
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Daily UI Design Challenge, Inspiration, and Resources
app
I/O 3000
http://2ndidea.com/design/gray-on-web-design/
http://www.life-is-bitter.com/entry/ui_checklist
