配色パターンからWebデザインを考える
2017年6月29日 Webデザイン, 色彩 ページを開いた瞬間にそのWebサイトのイメージを左右するほど重要な要素「色」。しかし色の組み合わせ、配色には無限のパターンがあり、正しい配色を見つけるのは簡単なことではありません。ここでは色彩の基礎と配色パターンの見つけ方の一例を紹介します。 ↑私が10年以上利用している会計ソフト！ まずは色彩の三属性について 色は彩度・明度・色相の三属性（三要素とも呼ぶ）から成り立っています。 彩度 色の鮮やかさの度合いを表します。彩度の高い色は派手・華やか・目立つ色といえます。子供服やキャラクターグッズ関連のサイトには彩度の高い色が使われることが多いです。逆に彩度の低い色は地味・おだやか・上品であるといえるでしょう。和食・ヴィンテージ風デザインのサイトには彩度の低い色がよく使われます。 明度 色の明るさの度合いを表します。明度が高い＝明るい色はさわやかで爽
Appleのデザイン戦略をウェブサイトから学ぶ、15のデザインヒント
Appleの美しいウェブサイトから学ぶ実用的な15のデザインヒントをDesign Shackから紹介します。 15 Design Tips to Learn From Apple 下記は各ポイントを意訳したものです。 サイトのキャプチャは可能なものは日本サイトのものにしています。 はじめに Apple社は高級なデザインと類語です。Appleが発信する偉大なデザインを観察することから、学べることはたくさんあります。 ここにあげた15のポイントはあなた自身の仕事に活用されることを意図したものです。この素晴らしいサイトデザインをあなたのインスピレーションとして使用してください。 1. Keep it Simple アップル Appleのウェブサイトを一目見てください。そして、あなたの目に見えるものではなく、見えないものについて注目してみてください。 例えば、空港でトイレを探していると想像してくだ
知っておきたいUIデザインパターン10選 | エンタープライズ | マイコミジャーナル
Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY. Janko Jovanovic氏がSmashing Magazineにおいて10 UI Design Patterns You Should Be Paying Attention Toのタイトルのもと、ユーザインタフェースに関するデザインパターンを紹介している。UIデザインパターンは一般的なユーザインタフェースの問題を解決するためのデザインパターン。繰り返し表れるような一般的な問題に対して効果がある。次のUIデザインパターンが紹介されている。 遅延レジストレーション サービスを使うにあたって最初に登録作業が必要になるのは、ユーザにいらだちを感じさせる。できればユーザ登録作業は必要になるまで遅延させてお
スタイリッシュなフォームを作るときに見るべきエントリまとめ
Form Design フォームデザイン さてさて、最近のwebの入力フォームは本当に凝ってるところが多くて、ただただ関心するばかり。 そんなわけで今回は、焦点を『フォーム』に限定し、スタイル抜群なフォームUIを勉強してみたい。 流れ的には インスピレーションデザイン集CSSによるフォームの変更方法JavaScriptによるフォームデザインという感じでお送りいたします。 インスピレーション まずは、スタイリッシュなフォーム。 これらは、webデザイン全体がフォームデザインとなっているまとめです。 まさにバインダー。 webの入力フォームを街頭アンケート用紙のように仕上げたデザイン。かっこいい。 くしゃくしゃっとしたような紙の一部にフォームが設置されている。 こちらもメモに名前を書くかのごとく。 深海に光がさす感じのイメージ。 シンプルイズベストなレイアウト設計がなされている。 １，２，３，
ウェブサイトをユーザーにリラックスして楽しんでもらえるようにする10のTips
ウェブサイトをユーザーにリラックスして楽しんでもらえるように、より使いやすくする10のTipsをWeb Designer Depotから紹介します。 10 Tips to Create a More Usable Web 以下、各ポイントのピックアップです。 1. Creating active navigation アクティブ機能をもったナビゲーションの設置 サイトのどのセクションにいるか、ユーザーに明示できるナビゲーションを設置します。 2. Clickable labels & buttons ラベルやボタンをクリック可能に フォームのラベル（label）やボタン（button）に、クリック可能であることが分かるようにスタイルシートで設定します。 例： <textarea name="code" class="css" cols="60" rows="5"> label, butto
使いこなすためのFlashデザイン
web creators 2004年7月号 巻頭特集 今日から使える多彩な応用テクニック WEBデザイン『動き』のパターン サンプルデータダウンロード 本特集で解説している記事のサンプルデータの閲覧とダウンロードができます。 記事をよりよく理解するための参考用としてご覧ください。 第1章 押さえておかなければならない基本表現 第2章 知っておきたいWebデザイン必要表現 第3章 覚えておきたいデザインの幅を広げる表現 本ページのデータはすべて記事をよりよく理解するための参考用として公開しているものです。HTMLファイルやCSSファイル、画像ファイルをはじめ、FLAファイルやSWFファイル、それらのソースコードを含む、公開しているすべてのデータの著作権は、それぞれのサンプルデータを制作した各制作者にすべてあります。したがって、著作権者の許可なく参考以外の目的や、譲渡、販売、営利目的で使用する
WEB制作者なら最低限知っておくべき色彩心理とWEBセーフカラー、WEBセーフカラーを出力するRubyコード - 久保清隆のブログ
色彩は、Webサイトが どのように際立つか ユーザの目にとまるか ユーザーにどのような感情を芽生えさせるか ユーザがどんな動作をするか に大きな影響を与える。 ユーザの属性に合わせて適切な色彩を使うことは、売上を増大させたり、滞在時間を長くしたり、直帰率を下げることにつながる。 また、Webサイトだけでなく、 ファッション インテリア エクステリア(住まいの外観) 広告、商品 などにも使えるので、汎用性のある知識だと思う。 色彩心理 色 プラスの心理的影響 マイナスの心理的影響 赤 情熱的 活動的 晴れやか 暖かい 元気の良い 購買欲求 安っぽい 派手 危険 暴力 青 さわやか 清らか 清涼感 すっきり クール 閑静 憂鬱 寂しい 冷淡 未熟 無機質 黄 若々しい 陽気 明るい 楽しい うるさい 目立つ 幼稚 警戒 緑 ナチュラル 新鮮 穏やか すがすがしい 毒 田舎 疲れ 未熟 紫 高貴
サイト公開前に役立つ２５のユーザビリティチェックリスト:phpspot開発日誌
25-point Website Usability Checklist | User Effect サイト公開前に役立つ２５のユーザビリティチェックリストが公開されていましたのでメモしてみました。 サイトの公開前にチェックリストとして使うといいかもしれません。 アクセシビリティ 1. ロード時間が速いか？(60KBぐらいがベター) 2. テキストと背景のコントラスト調整(差異が低く見にくくないか) 3. フォントサイズが読みやすいサイズか？行間、文字間は適切か？ 4. Flashやアドオンは控えめか？ 5. 画像に適切なALTタグが指定されているか？ 6. カスタマイズした404ページがあるか？デフォルトは非常に不親切 7. カンパニーロゴが分かりやすい位置におかれているか？ 8. キャッチフレーズが適切に設定されているか？ 9. 5秒で大体どんな内容が分かるものになっているか？ユーザは
ファビコンを自作できちゃうサイト「Favicon Generator」 | ライフハッカー・ジャパン
はーい。ファビコン自作したい人いませんかー!? ファビコンというのはブックマークやアドレスバーに表示されるちびっこロゴのあれですよ。ちなみに英語読みするとファヴ・コンですよ。ちゃんと下唇噛んでくださいね。 そんなこんなで、今回はファビコンが作成できるウェブサービス「Favicon Generator」をご紹介。こいつを使うと画像のインポート、編集、変換がこの上なく簡単に出来ちゃいます。 「Favicon Generator」はgif、jpeg、pngファイルをウェブサイト用のファビコンとして適した大きさである16x16ピクセルのicoファイルに変換。なぜico形式という特殊な形式なのかと言うと、pngやその他の形式でもたいていのウェブブラウザでは表示できるのですが、一時は天下を統一しそうな勢いだったこともあるIEは時として時代に乗り遅れている場合もありまして、ico形式でないと表示できない
UIデザインガイドラインのまとめ : could
UIUXガイドライン UIデザインガイドラインのまとめ デザインガイドラインは、実際同じようなガイドラインを作るときだけでなく、UIデザインを考える際にも役立つ貴重な資料です。今まで個別で紹介したことはありますが、今回は一挙にまとめてリストアップしてみました。 Introduction to Apple Human Interface Guidelines 個人的に UI デザインガイドラインといえばこれ。日本語訳も大変便利です Apple User Experience Guides ソフトウェア開発向けですが、イントロダクションあたりは参考になります iPhones Human Interface Guidelines 会員登録すると見れる PDF 資料ですが、上記のリンクからブラウザ上で観覧することが出来ます Windows User Experience Interaction G
Webタイポグラフィまとめ - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 フォント指定や行間、約物といった、文字周りのノウハウです。デザインというより技術的なまとめ。SWFObjectとかsIFRといったFlashネタを除けば、Webの文字は全部CSSでできるんだから... コーダこそタイポグラフィを意識すべし。看板みて書体言い当てるとか変態的な域まで達せずとも、原則だけ覚えとけばプロトタイプが様になるんだし。 オールドスタイル数字 アンパサンド（“＆”） スモールキャップ ハイフンとダーシ 各種スペース 合字 約物 約物はぶら下げる :beforeと:after 見出しのサイズ 初期フォントサイズ 行間の調整 余白の調節 各国の日付表記
１ピクのラインにこだわったデザインスタディ
ヘッダ内、ヘッダとコンテンツなど異なる色の背景の区切りに１ピクセルのラインを使用したデザインスタディをSpoonfed Designのエントリーから紹介します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]CSS3で何ができるの？ という時にみておきたいサイト集
http://www.designwalker.com/2009/04/wireframe-2.html
BestFreeCams.club - Only the Best Free Live Cams
IDEA * IDEA
IDEA * IDEA