デザインの基本日記 「配色編」｜Design Beginner
配色がうまくいかない場合の多くはたくさんの色をついつい使ってしまった結果招いていることが多い。まずは2色で配色をしてその上で少しずつ色の調整をすることによって、まとまりのあるデザインが作りやすくなる。 一般的に言われている配色は、ベースカラー7割、メインカラー2割、アクセントカラー1割。一番表現したいことをアクセントカラーにすることで表現したいことが何かはっきりわかりやすくなる。 なんとなく落ち着いていて物足りない場合、色相環で反対の色をアクセントカラーに持ってくるとインパクトがでる。この色相環の反対の色を反対色や補色といったりもする。 逆にガチャガチャして色がうるさい場合は、色相環の隣り合った色数色を選び配色することで全体的にまとまった印象になる。この色相環の近くにいる色のことを近似色と呼ぶ。 配色を決める場合、いくつかの軸があるが、何を表現しなければいけないかというテーマによって配色を
プロに学ぶ、一生役立つ配色の基本ルール8個まとめ【保存版】
なにかデザインをはじめるとき、無数にある色から配色を決定するのに頭を悩ませることもあるでしょう。この記事では、適切な配色カラーパレットを決めるのに役立つ８つの基本ルールを詳しく紹介します。 コンテンツ目次 1. 色数を制限しよう。 2. 自然からインスピレーションをもらおう。 3. 60−30−10ルールを試してみよう。 4. まずはグレースケールでデザインしよう。 5. 黒色を利用するのは避けよう。 6. 重要性を色のコントラストで表現しよう 7. 色を使ってユーザーの感情を引き出そう。 8. デザインを理解しやすくしよう。 9. ボーナス: デザイナー向け配色ツールまとめ 配色基本ルール１ 色数を制限しよう。 デザインプロジェクトに配色を適用するには、バランスが重要になります。色数が増えるほどバランスを取るのは難しくなります。配色は最高でも3色までに制限することで、よりよい結果となるで
フォントオタクなデザイナーが本気で選んだ「美しいフォント」24選【フリー＆有償】
『Soldi』は、複数の企業と提携し情報を提供しており、当サイトを経由して商品への申込みがあった場合には、各企業から報酬を受け取ることがあります。ただし当サイト内のランキングや商品の評価に関して、提携の有無や支払いの有無が影響を及ぼすことはございません。また当サイトで得た収益は、サイトを訪れる皆様により役立つコンテンツを提供するために、情報の品質向上・ランキング精度の向上等に還元しております。 名古屋の事業会社でデザイナーをやっているAkitaと申します。 プロのデザイナーとして、デザインで気にしているところは沢山ありますが、中でも一番こだわっているのは「フォント」です。 「フォントの選び方でデザイナーの実力が分かる」というのは、私が最初にデザインを教わった先輩の言葉でした。 世の中にはどんどんクオリティが高く、美しいフォントが登場しています。 広告・パッケージではやはり有償フォントが目立
デザイナーが持っていたい、すごいフリーフォント素材42個まとめ
デザインをしているときに悩んでしまいがちで、全体のイメージを決める重要な要素のひとつ、フォント選び。手持ちのフォントコレクションを定期的にアップデートして、クリエイティブな作品をつくってみましょう。 今回は、最近公開された無料ダウンロードできるフリーフォント素材をまとめてご紹介します。太さに応じて豊富なウエイトが用意された書体から、今年のトレンドでもある手書き、ブラシスタイルの他に、人気の高い美しい筆記体デザインなどが揃っています。 詳細は以下から。 デザイナーが持っていたい、すごいフリーフォント素材まとめ あさご本丸ゴシック 伝統的な雰囲気でありながらも、クルクルとしたループ状の線が個性的でモダンさを感じるエレガントな書体だそうです。 ※ 個人利用可能 Margurite 流れるように美しい筆記体スタイルで、リガチャ合字なども豊富に用意された、プロユースのデザインフォント。 ※ 個人利用
デザインの確かな知識が身につく！Webサイトやアプリのデザインの勉強になるスライドのまとめ
実践的なUXデザインやインタラクションデザイン、レスポンシブサイトに効くデザインTips、Sketchを使ったデザインフロー、Webデザイナーのためのタイポグラフィ講座など、Webサイト・アプリなどのUIデザイン/UXデザイン勉強になるスライドを紹介します。 時間をかけてゆっくり、何度でも見たいスライドばかりです。 写真: ぱくたそ 確実に良くするUI/UX設計 from Takayuki Fukatsu 実践的なUXデザインとインタラクションデザインの考え方 from CyberAgent, Inc. UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015 from Sociomedia アクセシビリティからはじめる、WebサイトのUXデザイン from Yoshinori OHTA いいデザインのために組織の一人ひとりができること f
ワイヤーフレーム（モックアップ）を作るアプリがすごい進化してた | バニデザノート
ウェブサイトをデザインをするときに、ワイヤーフレームを作るのって 私にとっては「どこに何を置いて、どういう動きをするのか」というメモのようなもので。 手描きでレポート用紙に描いて、 スキャンしてプロジェクトフォルダへ入れておくことも多いのですが デザインの前に「こういう配置でいいですよね？」って共有したいとき 清書するアプリを時々探してしまうんですよね。まだしっくりくるものがなくて。 最近調べてすごいなーとおもったアプリや、無料でもざくざく使えそうなものまでご紹介。 Moqups Free Plan (offers 2 active projects and 5MB of storage) Monthly：Standard active project 10 で $9〜 ログインしなくても無料で組めます。 960gsグリッド表示可能です。 ほぼコンポーネント揃ってます。ほぼ装飾なしなステン
デザイン思考を学べるオンライン学習サービス IDEO U がスタート ｜ブログ｜root｜芯を問い、成長に貢献する
IDEO（アイディオ）とは？ アメリカ・シリコンバレーに本社を置くデザイン・コンサルティング企業。世界9拠点約500名が働くグローバルな組織です。 製品、サービス、環境、デジタルエクスペリエンスなど幅広い分野でデザインを手がけており、代表的なクライアントにApple 、Procter & Gamble(P&G)、ペプシ、マイクロソフト、Eli Lilliyなどがあります。 ティム・ブラウン：創造性と遊び | Talk Video | TED.com デザイン思考の実用性デザインと聞くと洗練された製品やビジュアライズされた広告などをイメージされる方も多いと思います。 今回注目するデザイン思考では問題解決のアプローチ手法としてデザインの考え方をご紹介しています。 デザイン思考を活用する実用例として、組織内での事業課題や製品開発における問題解決にお悩みのマネージャー職の方々やイノベーティブな新規
「エンジニアのためのWebデザイン基礎の基礎」関連の最新 ニュース・レビュー・解説 記事 まとめ - ITmedia Keywords
エンジニアのためのWebデザイン基礎の基礎（最終回）： 「AIDA」でデザインの効果を計測する デザイン初心者向けにWebデザインのイロハを解説する本連載。最終回は、Google Analyticsを使ってデザインの効果を計測する際のポイントを解説する。（2015/3/27） エンジニアのためのWebデザイン基礎の基礎（6）： Webサイトの満足度を上げる「UX（ユーザーエクスペリエンス）」の作り方 デザイン初心者向けにWebデザインのイロハを解説する本連載。今回は、Webサイトの満足度を上げる「UX（ユーザーエクスペリエンス 利用者体験）」の作り方を解説する。（2015/3/20） エンジニアのためのWebデザイン基礎の基礎（5）： 28歳、女性、未婚、年収300万円――サイトの方向性を決める「ペルソナ」 デザイン初心者向けにWebデザインのイロハを解説する本連載。今回は、サイトの方向性
マテリアル デザイン関連の動画に日本語字幕が付きました
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
第6回 裁ち落としてインパクトのあるデザインを作る | gihyo.jp
ユーザビリティを落とさずインパクトを出すには 雑誌などで、ページサイズいっぱいに画像を配置したデザインをよく見ますよね。 写真を全面にレイアウトすることで、インパクトを出すことができます。 今回は、同様の効果をウェブで実現する方法を解説します。 ここ数年、ブラウザサイズいっぱい（width:100%）に背景画像などを敷いたサイトを多く見かけるようになりました。ただ、パターン画像ならリピートすればいいですが、1枚絵だとそうはいきません。1枚絵を背景にする場合、以下の3つくらいの方法が考えられます。 backgroundとの輪郭をはっきりさせた形で、画像のサイズでぶつ切りにする グラデーションさせるなどして、backgroundの色となじませる ウィンドウサイズを固定値にする 1と2は、制約のある中でのデザインになるため、自由度が下がります。 3は、デザインする枠のサイズを決められるため、自由
グリッドシステム -サイトへの有効活用方法 | コリス
グリッドシステムとは、スイスのグラフィックデザイナー：josef muller blockmann（ヨゼフ・ミューラー・ブロックマン）が考案したデザインの手法です。 1981年に刊行した「Grid Systems in Graphic Design/Raster Systeme Fur Die Visuele Gestaltung」は、さまざまなレイアウトにグリッドシステムを用いて、繊細にデザインが行われています。 このグリッドシステムは、エディトリアル デザインで広く利用され、今日ウェブデザインにも多くの影響を与えています。 グリッドシステムの概要 グリッドシステムの機能 グリッドシステムをサイトに導入するメリット グリッドシステムに関する書籍 グリッドシステムの概要 グリッドシステムとは、縦横線の格子（グリッド）を下地として、そこに出来たブロックごとに図版や文字を配置し、デザインを行う
カンプがなくなったときのデザイナーの役割
手段を再想像する 昨年末に開催された CSS Nite Shift 5 で「Reimagination（再想像する） 」の話をしました。人とコンピュータの関わり方が行動や価値観を再定義しているのと同じように、Webサイト制作にしても同様のことがいえます。今までの当たり前を疑い、未来に柔軟に対応できるワークフローが必要とされています。 例えば従来必須だと言われていたワイヤーフレームも考慮対象です。少し前に ASCII へ「柔軟性あるデザインプロセスへ移行するためのヒント」という記事を寄稿しました。ワイヤーフレームが果たそうとしているコミュニケーションの目的は間違っていませんが、つくるためのツールや手法に問題があるのではないかという疑問を投げかけた記事。絶対いると思い込んでいるものも、今の時代にマッチしなくなってきているものは少なくありません。 また、Photoshop や Fireworks
UIデザイナー不要説 / LSD LAB
2014/10/26 UIデザイナー不要説 最近UIについてもやもやしていることがあるので書く。間違った知識もあるかもしれない。 先日UI CrunchというUIの勉強会のようなものが開催され、僕はschooの動画配信を見ていたのだが、どうも根底に「UIデザインの重要性が日本では認知されていない」という共通認識が流れているように思える発表が多かった。デザイナー生存戦略やエンジニアとうまく付き合う方法等…。 僕も前のブログ(UID Lab)でそのようなことを訴えてきたので、あぁ、やっぱりみんな不安なんだなあと思ったが、逆説的に「僕らデザイナーが信じているUIデザインの価値なんて、本当は虚像なんじゃないか？」ということを疑ってみたい。 そもそも、なぜみんな「UIデザインが重要視されていない」と感じるのだろう？自分が日頃感じることを列挙してみる。 UIデザインが重要視されていないと思う理由 1.
第13回 フルスクリーンで背景画像を表示するには | gihyo.jp
Webでも裁ち落としでインパクトを出せる DTPでは、1ページ内に写真を裁ち落としでページいっぱいに載せ、その上に文字を置くのは定番のデザイン。でも、Webでそれを表現するのはなかなか難しいものです。ユーザーによってディスプレイの解像度や利用するブラウザが違うためです。 現在、多くの解像度やブラウザに対応できるように、widthを固定し、コンテンツをセンター配置にすることが多くなっています。その分、うまくフルスクリーンで表現できれば、することができれば、より一層かっこよさやインパクトを与えることができます。 今回ご紹介するのは、JavaScriptを使い、フルスクリーンで背景画像を表示する方法です。第6回「裁ち落としてインパクトのあるデザインを作るでも同じようなUIをご紹介しましたが、IE6で縦スクロールが出てしまうという欠点があります。オプションの充実度からも、今回のやり方のほうが使いや
創作意欲が刺激されるほどクリエイティブなウェブデザインを14つまとめて紹介 - LITERALLY
こだわり抜かれているウェブデザインを多く見ることは想像力を豊かにしてくれると思う。本当にクリエイティブでクオリティの高いサイトを見ると「自分も何かを作りたい！」と創作意欲が強く刺激されることもある。 今回はぼくがここ数年間で見てきたウェブページの中で、創作のモチベーションを高めてくれたものをまとめて紹介しようと思う。 1. AMP MUSIC 最近のお気に入り。アフリカのストリートミュージックを取り扱う音楽レーベル「AMP MUSIC」のウェブサイト。スマホで見ると、アニメーションや音楽の再生がないが、それでも配色や全体のバランスが洗練されている。 2. UNIQLO INTRODUCTION サイトの始まり方から、マウスオーバー時の動きまですべてが群を抜いてカッコイイウェブページ。流れてくる衣服や写真の流れまでこだわり抜かれている。作業用音楽で聞いていたいほど、BGMはリズミカルで心地が
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
404
Amazon.co.jp： デザイン・ルールズ
MdN 2019年4月号
Amazon.co.jp: デザインの教室 手を動かして学ぶデザイントレーニング(CDROM付): 佐藤好彦: 本
7日間でマスターするレイアウト基礎講座
