プロに学ぶ、一生役立つ配色の基本ルール8個まとめ【保存版】
なにかデザインをはじめるとき、無数にある色から配色を決定するのに頭を悩ませることもあるでしょう。この記事では、適切な配色カラーパレットを決めるのに役立つ８つの基本ルールを詳しく紹介します。 コンテンツ目次 1. 色数を制限しよう。 2. 自然からインスピレーションをもらおう。 3. 60−30−10ルールを試してみよう。 4. まずはグレースケールでデザインしよう。 5. 黒色を利用するのは避けよう。 6. 重要性を色のコントラストで表現しよう 7. 色を使ってユーザーの感情を引き出そう。 8. デザインを理解しやすくしよう。 9. ボーナス: デザイナー向け配色ツールまとめ 配色基本ルール１ 色数を制限しよう。 デザインプロジェクトに配色を適用するには、バランスが重要になります。色数が増えるほどバランスを取るのは難しくなります。配色は最高でも3色までに制限することで、よりよい結果となるで
エンジニアが知っておくべきデザインの基本。「デザインガイドライン」と「コンポーネント」を学ぶ！ - エンジニアHub｜Webエンジニアのキャリアを考える！
エンジニアが知っておくべきデザインの基本。「デザインガイドライン」と「コンポーネント」を学ぶ！ Appleをはじめとする多くの成功企業がデザイナを役員に据えるなど、デザインに対する重要度が年々上がっているこの時代、若手のうちにUIデザインに関する基本的な考えを身につけ、より良いプロダクトを制作できるエンジニアを目指しましょう。 こんにちは。 グロースデザイナ/フロントエンジニアとしてWebサービス開発に携わっている右寺（@migi）と申します。最近は複数の企業で、数値解析から企画提案、開発も含めてサービスを成長させるためのお手伝いをしています。 現在はフリーランスとして活動していますが、直近では株式会社グッドパッチというUI（ユーザインターフェイス）デザインに特化した会社に勤めており、そこではデザインとの距離がとても近いところで開発をしていました。 そんな私の経験から、この記事では「エンジ
2017年大本命！HTML/CSSで表現できる、参考にしたいカード型レイアウト60個まとめ - PhotoshopVIP
Google が2014年に発表したマテリアルデザインは、ウェブだけでなくグラフィックデザインでもますます人気となっており、さまざまな方法で採用しているケースをよく見かけるようになりました。 今回は HTML と CSS、わずかな JavaScript で実装できる、今後の参考にしたいカード型レイアウト用コードスニペットをまとめてご紹介します。コードニペットは各レイアウト別にカテゴリ分けしているので、ウェブサイト制作に活用したものを見つけてはいかがでしょう。 【2017年版】HTML/CSSで表現できる、すごいテキストエフェクト66選 イメージスライダーを魅力的に！コピペ実装できるHTMLスニペット24個まとめ ウェブをもっと面白く！コピペ可能なHTML/CSSスニペット45個まとめ 2016年12月度 コンテンツ目次 1. ブログコンテンツ用レイアウト 2. 名刺型レイアウト 3. グリ
CSSで作る！押したくなるボタンデザイン100（Web用）
.btn-square { display: inline-block; padding: 0.5em 1em; text-decoration: none; background: #668ad8;/*ボタン色*/ color: #FFF; border-bottom: solid 4px #627295; border-radius: 3px; } .btn-square:active { /*ボタンを押したとき*/ -webkit-transform: translateY(4px); transform: translateY(4px);/*下に動く*/ border-bottom: none;/*線を消す*/ }
必見！SEO対策の基本の方法を分かりやすく解説します。 - スキナモノート
最終編集日：2017-3-10 はじめに サイトやコンテンツを作る上で外せないのがSEO対策。 実際にどういう事をするのがSEO対策なのか。今回はGoogleが推奨する内容を元に、イラストも付けて分かりやすくまとめていきたいと思います。SEO対策の中でも基本の部分です。今現在これだけでも充分に上位を取る事も可能です。実際にこの記事が「SEO対策」というキーワードで二番目に表示されています。現在は順位がさがってしまっています。 改めて書き直しもしたいと思いますが、SEOの基本を学ぶためのことが書かれています。まずはSEOとはどんなものか。それを探している人には分かりやすい内容で書いてます。 自分の再認識用に。これから学ぶ人の参考に、知っている人のおさらいに。この記事が役立つ情報となれば嬉しいです。 ※【サイト】と記述するのは【WEBサイト・ブログ】の意味です。 ※【コンテンツ】と記述するのは
2015年、現在のWebデザインを確認しながらこれからのトレンドを探る
Webデザインは常に進化しており、活気にあふれている世界です。現在のWebデザインの状況を確認しながら、2015年の予測されるトレンドを紹介します。 Webデザイナー・ディレクターだけでなく、Web制作に携わる人は知っておいて損はないキーワードばかりです。 Web Design Trends That Will Rule 2015 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 高品質なストックフォト 単色の背景 動画を使った背景 面白いナビゲーション カード・タイル型レイアウト 固定配置のブロック パララックスは繊細に いかにスクロールしてもらえるか 今までとは違うイラストの使い方 ビッグデータ・グラフ プロダクトファースト フラットデザインは成長し続けている モバイルファースト 人間的な温かみのあるデザイン UXのちょっとした工夫
2015年これからのWeb制作業界の流れ、伸ばしておきたいスキル、Webデザインのトレンドなどのまとめ
数多くのブログで2015年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 注目すべきキーワードは、Material Designの本格始動、マイクロデザイン、スクロールコンテンツ、スマフォ・タブレットユーザーの更なる増加、そしてHTML/CSSのフレームワークの陰り。 写真：re:splashed 2015年、現在のWebデザインを確認しながらこれからのトレンドを探る 2015年、Web制作業界全体の流れ 2015年にあなたが目にするWebデザインのトレンド 2015年に大きく変化するウェブデザインの10の傾向 2014年のトレンドで良かったもの、ダメだったもの モバイルデザインに向けたWebデザインの7つの戦略 2015年、IT系で求められているスキル 2015年、現在のWebデザインを確認しながらこれからのトレンドを探る
【超基礎】デザイン苦手なディレクターが依頼時に気にすべき7つのポイント
こんにちは。まだまだ半人前ですが、元気にWebディレクターやってます。まっつんです。 唐突ですがみなさん... なんて事態に困ったり、迷ったりしていませんか？ 僕自身も上記の質問に「そんなことあるわけ無いじゃん」と言ってみたいところなんですが、残念ながら...。 というわけで、今回は僕が超苦手としているデザイン制作依頼時に、なるべく失敗を起こさないよう必死で気をつけているポイントを紹介しつつ反省してみようかと思います。 ※ちなみに今回のモデル案件は広告ランディング用のLPページデザイン作成（マークアップは別）を想定しています。 1. 制作するページの目的をクライアントと共有する そもそもの話になりますが、なぜそのページを作成するか。「目的」の話です。 デザインを作る最初の段階で「どんなターゲットに、どんなサービス・商品を、どのようにしてほしいのか」が明確でないと、どういう構成・内容でページ
ゲームニクス理論
2017/11/18に開催されたUnity道場スペシャル 2017京都の講演スライドです。 講師：黒河 優介（ユニティ・テクノロジーズ・ジャパン合同会社） 「効果的な最適化のために事前に何をしたらよいか？」「どういう考えで最適化を行っていけばよいか？」などの基本的な考え方から、具体的なProfilerの使い方までお伝えしていきたいと思います。この講演で紹介する考え方は、日本のエンタープライズチームを通して得た知見になります。最適化のテクニックそのものは紹介しませんが、考え方を身につける事で、最適化のために役立つでしょう。 こんな人におすすめ ・最適化したいが、何をしてよいかわからず困っている人 ・効率的に最適化を行いたい人 受講者が得られる知見 ・Unity Profilerに関するノウハウ ・最適化の目算、見積もりをする技術 Unityのイベント資料はこちらから： https://www
[Web] UI/UXデザインがわかるサイト8つのまとめ
ここ数ヶ月、gleesyという新しいサービスをつくっているのですが、 どうにもデザインが難しい！ デザインが主観的な仮説の積み重ねになってしまっていて、いかがなものかと思ったので、 ユーザビリティの理論を調べてみました。 と、言ってもただの自分のためのまとめメモですが。 あと、gleesyが気になった方はhttp://gleesy.com/より事前登録をお願いします。 【0.目次】 ―基本 ・ユーザビリティ5原則 ・デザインガイドライン ―ガイドライン ・３つのチェック項目と5つの法則 ・インターフェースデザインで気をつけるべき10のこと ・カラーデザインの原則 ―評価方法 ・ユーザビリティテスト ・ヒューリスティック ・チェックリスト ・認知的ウォークスルー ・シナリオウォークスルー 【Ⅰ.基本】 まずは、ユーザビリティの基本となる考え方です。 ユーザビリティを考慮したサイト設計は以下の
![[Web] UI/UXデザインがわかるサイト8つのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/3eb672b73358f759376101aa51cca30d48f0e13e/height=288;version=1;width=512/http%3A%2F%2F4.bp.blogspot.com%2F-ULtIWFct5AM%2FTjFRdl166eI%2FAAAAAAAAAoY%2FFM3B0bh872U%2Fw1200-h630-p-k-no-nu%2Fuxresearch_01_03.gif)
http://oalp.org/doc/nilesen/
For full functionality of this site it is necessary to enable JavaScript. Here are the instructions how to enable JavaScript in your web browser.
Webコンテンツの成果が上がるレイアウトの法則とは？ | 誰も語らなかったWebコンテンツ作成技法
優れたコンテンツ構成の鉄則を探る！優れたコンテンツとは顧客の悩みを解決できるため、検索やお気に入りから訪問者を獲得できます。そして、そのコンテンツは別のページに誘導する力があり、しかもゴールに結びつける力があります。 前回説明したように、こうしたコンテンツは、天才的なアイデアや人並みはずれた文章力で作られるのでしょうか。実際にはそうではありません。普通のビジネスパーソンが、普通に考え、普通の文章力で作ったものが成果を上げているのです。 意図的ではない分、成果が小さいことがもったいないのですが、これを意図的に行っていけば、狙った成果をより大きなものにできるはずです。それでは、コンテンツの成果が上がる構成とはどんなものなのか解説していきます。 コンテンツの見出しは画像を使わず2行のテキストで作る前回説明したように優れたコンテンツは、検索集客力が高く検索から顧客と出会う力を持っています。検索から
UXとは何ぞや？ UXを高める武器を手に入れよう！ ― 開発者は、いかにユーザー・エクスペリエンス（UX）と付き合うべきか ―
連載目次 ◇本連載の趣旨 ユーザー・エクスペリエンス（以下、UX）とは、大ざっぱにいうと、ある製品（アプリケーション）をエンド・ユーザーが使った際に経験する「楽しさ・心地よさといったプラスの感情」を、（エンド・ユーザーに提供する）価値として重視するコンセプトだ。具体的には、見た目のみではなく、使い勝手や信頼性などの側面を重視した設計を行い価値を実現する。（UXの詳細な定義については後述）。そのUXが注目されるようになって久しい。が、UXの定義や意味するところ、もたらされる恩恵は、一般の開発者レベルまで伝わっているだろうか。 開発者にUXについて尋ねると「UXはデザイナーの仕事（なので、自分には関係がない）」というような意見を持っている方に出会う。本当にUXに関係のない開発者がいるのだろうか。 アプリケーションに対するエンド・ユーザーの不満を例に、不満の原因が誰の責任か見てみよう。 これら、
説得力がグンと上がる！UIデザインの心理学
オライリーから出ている「ユーザーインターフェースデザインの心理学」から使えそうなものを実例を踏まえピックアップ！これでUIデザイン説明の説得力をあげよう！ 情報は一度にすべて見せるのではなく、そのとき必要なものを段階的に開示させた方がよい。 デザイナーが犯しがちな失敗は一度に大量の情報をユーザーに与えてしまうことです。 情報は一度に大量に与えるのではなく、その時点で必要としている情報だけを与えるほうが様々なニーズに対応することができます。 ユーザーの中には大まかな説明でよい人もいれば、詳細を知りたがっている人もいます。 つまりどういう事？ 情報は一度に見せるのではなく段階的に見せる 重要なのはクリック回数ではない。クリックのたびに必要な情報が手に入るのであればユーザーは喜んでクリックする 誰がいつ何を必要としているかを理解する。各段階で何を必要としているか的確に把握していないと、この手法は
『コーポレートデザインにおけるマルチデバイス対応』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 みなさん、こんにちは。 アメーバ事業本部のHR戦略室でデザイナーをしております安西謙之(@anjilina_nolie )です。 今回は、コーポレートサイトのマルチデバイス化を踏まえつつ、半年程前にリリースしました(だいぶ前ですが…)スマフォ版コーポレートサイトについて、ご紹介したいと思います。 コーポレートサイトのマルチデバイス化 弊社のコーポレートサイトでは、国内版PCサイト・フィーチャーフォンサイト・そして今回ご紹介するスマートフォンサイトはMobableTypeを使って、海外版PCサイトはWordPressを使ってを制作、運用しています。 【
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
gif89a.net
デザイナーこそ覚えておきたいCSS最新事情！ あなたの知らないfont-familyのイマ
UI Design Dos and Don’ts - Apple Developer
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
Webサイトのデザインで「かっこよく！」「インパクトを！」としか言わないWeb担当者よ、本来の目的に立ち返れ | 生田昌弘の「Web担当者に喝！」
