プロに学ぶ、一生役立つ配色の基本ルール8個まとめ【保存版】
なにかデザインをはじめるとき、無数にある色から配色を決定するのに頭を悩ませることもあるでしょう。この記事では、適切な配色カラーパレットを決めるのに役立つ８つの基本ルールを詳しく紹介します。 コンテンツ目次 1. 色数を制限しよう。 2. 自然からインスピレーションをもらおう。 3. 60−30−10ルールを試してみよう。 4. まずはグレースケールでデザインしよう。 5. 黒色を利用するのは避けよう。 6. 重要性を色のコントラストで表現しよう 7. 色を使ってユーザーの感情を引き出そう。 8. デザインを理解しやすくしよう。 9. ボーナス: デザイナー向け配色ツールまとめ 配色基本ルール１ 色数を制限しよう。 デザインプロジェクトに配色を適用するには、バランスが重要になります。色数が増えるほどバランスを取るのは難しくなります。配色は最高でも3色までに制限することで、よりよい結果となるで
必見！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デザインを確認しながらこれからのトレンドを探る
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.
説得力がグンと上がる！UIデザインの心理学
オライリーから出ている「ユーザーインターフェースデザインの心理学」から使えそうなものを実例を踏まえピックアップ！これでUIデザイン説明の説得力をあげよう！ 情報は一度にすべて見せるのではなく、そのとき必要なものを段階的に開示させた方がよい。 デザイナーが犯しがちな失敗は一度に大量の情報をユーザーに与えてしまうことです。 情報は一度に大量に与えるのではなく、その時点で必要としている情報だけを与えるほうが様々なニーズに対応することができます。 ユーザーの中には大まかな説明でよい人もいれば、詳細を知りたがっている人もいます。 つまりどういう事？ 情報は一度に見せるのではなく段階的に見せる 重要なのはクリック回数ではない。クリックのたびに必要な情報が手に入るのであればユーザーは喜んでクリックする 誰がいつ何を必要としているかを理解する。各段階で何を必要としているか的確に把握していないと、この手法は
Vol.1 ディレクターなら最低限知っておきたい色彩設計 - 機会損失を防ぐ！ECサイトの色彩設計 - Web Directors Studio
今回から3回にわたり、ECサイトの色選びについて学んでいきましょう。ECサイトにおいては、何よりも重要なのはその商品を売ることです。そのためには正しい色を使って、伝えたい情報を確実に伝達させ、機会損失を減らす必要があります。 自社の商品を販売しているのでなければ、多くの商品は競合サイトでも販売されているはずです。単にサイトのデザインや配色がよいだけで売れるわけでないことは、実際にECサイトを制作・運用したことのある人であれば、既に理解されていることでしょう。 では美しい色彩が必要ないかと言われるとそうではありません。美しいかどうかは主観によりますが、その商材を販売するのに適した配色である必要があります。また訪問者にサイトを印象づけることで、再訪しやすくすることも重要ですし、ユーザビリティに配慮してストレスを感じさせることなく購入してもらうための流れを作る必要もあります。 例は同じ写真を利用
WordPressでブログじゃないWebサイトを作るときのいろいろ（サンプル付き）
とても長い記事になってしまいましたが、WordPress を使って、コーポレートサイトのサンプルを作ってみました。WordPress はブログだけじゃなくて、色んな Webサイトが作れますよね！今回は、私が WordPress でサイトを作る時にやっていることをまとめてみました。 今までこのブログの中で、いろいろな WordPress の Tips を書いてきました。でも WordPress を使った Webサイトの作り方そのものは、今まで書いた事がありませんでした。そこで今回は、 WordPress を使ってブログじゃない Webサイトをまるごとひとつ作って、私なりの作り方をまとめてみました。 今回のサンプルサイトでは、WordPress の固定ページ機能はもちろん、カスタム投稿タイプやカスタムタクソノミー（カスタム分類）を使って作っています。 ページを表示する為に使っているテンプレート
CSS Sprite Generator, Editor, and Code
What are CSS Sprites CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image. This technique can
いまさら聞けない＞＜； 基礎から学ぶ「HTML5」超入門！
HTML5 旋風、吹き荒れてますね！(^0^)／ さて、ものすごく突然で恐縮ですが、この度「HTMLファイ部」、設立しました！ 株式会社カヤック（本社：神奈川県鎌倉市、 代表取締役CEO：柳澤大輔、http://www.kayac.com以下「カヤック」）は、HTML＋CSSコーディング、JavaScript プログラムを担当する職種が所属する「HTMLファイ部」を発足いたします。 これまでHTMLおよびCSS、JavaScriptの担当者は、プログラマが所属する技術部、デザイナが所属する意匠部ME課（MEはMarkup Engineerの略）に分かれて所属していましたが、昨今のHTML5の進化と普及を受けて、HTML、CSS、JavaScriptの担当者は「HTMLファイ部」にて活動をスタートします。 そんなHTMLファイ部員が今回お送りさせていただくのは、 HTML5 について基礎から
HTML5+CSS3 入門
Webを記述する言語の標準の現状 昨年度であれば、HTMLを記述する授業では自信をもって以下の基準を推薦していました。 HTML (文書の構造を記述する言語) – XHTML 1.0 もしくは XHTML 1.1 CSS (文書の体裁・デザインを指定する言語) – CSS 2 しかしながら、ここ数年で、とくに去年あたりから状況は大きく変動しつつあります。現状の変化を理解するには、ここに至るまでの歴史的な経緯について簡単に理解する必要があります。ここまでの経緯を整理した上で、将来の展望を探りたいと思います。その上で、この授業ではどのような基準にのっとって「正しい」ということを定義するのか決めていきたいと考えます。 HTML (Webサイトの記述言語) の標準化巡る闘争の歴史 AppleInsider: なぜ Apple は HTML 5 に賭けているのか： ウェブの歴史 [Page 2] よ
ディレクターなら知っておきたい「バナー広告制作の基礎知識」 : LINE Corporation ディレクターブログ
こんにちは、NHN Japanのマッチングサービス事業部でマーケティングを担当しているotakeです。 今回は担当サービスの運用業務と並行して出稿も担っている忙しいディレクターさんやこれから出稿業務に携わる方のために、チャッチャと読んで現場ですぐに使える実戦的なナレッジの一部を「バナー広告制作の基礎知識」として書かせていただきます。 当事者意識を持たせるAttentionを考える ユーザーの購買行動において、バナー広告が担うポジションはAttention（注意）喚起にあたりますが、一般的にバナー広告は誰に注意を促すものなのでしょうか。 検索から目的を持って能動的に何かを探しているわけではないが、潜在的な関係性を秘めているのがバナー広告の対象となる潜在層。ここに位置する対象には”この広告はあなたに関係あるものです”、”おそらくあなたの話です”といった潜在欲求に気づきを与える「当事者意識を高め
WebエンジニアのためのWebサービスデザイン実践講座
DeNA 社内勉強会に呼んでいただいて、お話させていただきました。 Reviewに登場していただいてるサービスはこちらです。 動く小説投稿サイト Denkinovel by @katryo さん http://denkinovel.com/ ご協力ありがとうございました( ˘ω˘)
2130703450443574201?keyword=HTML5
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
これからWebサイトの制作をしたいけど、何から勉強したらいいの？っていう人のためのガイド
以前から、「Webサイトを制作をしたいけど、何から勉強したらいいの？」という質問をよく頂いていました。私が Web制作を勉強し始めた頃に比べると、最近はたくさん情報がありすぎて何から始めればいいのか迷う人も多いみたい …。なので今回は、Webサイトを作るのに必要な知識を簡単にまとめてみました。 最近本だなを整理していて、もう読まなくなった Web制作系の本を片付けたりしてみました。ずーっと前、Webサイトってどうやって作るんだろうってところから始まって、用語もよく分からないまま色んな本を読んだりした頃を思い出します …。 Webサイトは HTML っていうものでできていて、CSS っていうもので、見た目をデザインしていくのかぁ … っていうことさえ、あの頃の私にとっては新しい発見だったなぁ … なんて思ったりしました。 最近では HTML5 とか CSS3 とか、私が勉強し出した頃に比べる
Web屋の私がブックマークしているサイト65 | Webクリエイターボックス
2017年7月14日 便利ツール 久しぶりに自分がブックマークしているサイトを整理してみました。昔から変わらず愛し続けているWebサービスやチュートリアルサイトなど多数あったので一挙にご紹介します！有名どころからあまり知られていないけど便利なサイトまで、多数あるので時間のある時にじっくり見てみてください！ ↑私が10年以上利用している会計ソフト！ ブックマークしているサイト 目次 Webサービス デザイン関連 画像関連 CSS jQuery WordPress フォント スマートフォン 配色関連 HTML5 メルマガ Webサービス 1. Sendoid Sendoidは会員登録不要のファイル送信サービス。ファイルをアップロード後にURLが生成されます。パスワード設定可。 2. HTMLエンコードフォーム HTMLエンコードフォームは特殊記号などをエンコード・デコードしてくれるWebサービ
Swiftで遊んでますか？ - クックパッド開発者ブログ
モバイルファースト室の三浦です。 みなさんはplayground使っていますか？ Swiftにはplaygroundが用意されていて手軽にかつライブレンダリングでコーディングをすることができます。 CoreGraphicsの描画などを確認しながらコードを書くこともできてとても便利です。 早速Swiftで簡単なスケッチをしてみましょう！ Xcodeでplaygoundファイルを新規作成します。次にUIKitをimportします。 import UIKit 次に表示のためのUIViewを生成します。 // ビューのサイズ let size = CGSize(width: 200, height: 200) // UIViewを生成 let view:UIView = UIView(frame: CGRect(origin: CGPointZero, size: size)) view.back
そのデザインには理由がある！デザインの原則をWebデザインにどのように取り入れるのかのチュートリアル
デザインの原則をWebデザインにどのように取り入れるのか、それを言葉に表すのはなかなか難しいことです。デザインの原則を理解して手を動かす、またクライアントにデザインの説明を行うといったこともあるでしょう。 デザインにはなぜそうなるのかという理由があります。 実際のWebページのデザインを元に、デザインで大切な原則とそれらをWebデザインにどのように取り入れるのかを紹介します。 7 Undeniable Design Principles You Can't Ignore 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 photoshopvip.netというブログにも同記事の翻訳がありますが、あちらは無断翻訳・画像の使用も無断であると、元記事の作者から連絡を受けています。 使用するデザイン 1. Hierarchy -階層 2. Rep
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webサイトのデザインで「かっこよく！」「インパクトを！」としか言わないWeb担当者よ、本来の目的に立ち返れ | 生田昌弘の「Web担当者に喝！」
マンガ：Webディレクター 江口明日香が行く
