ユーザーインタフェースにおける視覚効果 - Frasco
われわれの目はとても奇妙な器官であり、ときどきわれわれ自身に嘘をつきます。ヒトの視知覚の特性を知っていれば、より親しみやすく、よりすっきりとしたデザインの作成が可能となるでしょう。視覚トリックを活用し、読みやすくてバランスのとれたフォントを制作するタイプフェイスデザイナーだけでなく、ユーザーマシンを作るインターフェースデザイナーにとっても役に立つ知識です。 １．整然としたビジュアルサイズ どちらが大きいでしょうか？：400ピクセル四方の正方形でしょうか？それとも400ピクセル四方の円でしょうか？幾何学的に言えば、どちらも幅と高さはまったく同じです。では、下図をご覧ください。われわれの目は、正方形の方が円より重い（大きい）と瞬時に捉えてしまうのです。余談ですが、ビジュアル効果を言い表す際には、重さに関係した単語の方が適切です。 この図形が正しく描かれていると信じられない方たちのために、ガイド
メディアづくりの参考になる！ デザインがイケてる海外メディア10選 - メディアの輪郭
メディアづくりを考えるとき、国内のメディアだけでなく、海外メディアに目を通すことで参考になることも多そうです。インスピレーションを得るために、デザインが優れていると思う、海外メディアを10個に絞って簡単に紹介します。 デザイン関係なく、注目の新興メディアを知りたい方は以下の記事も参考になさってください。 海外における新興ウェブメディアの隆盛 〜12のメディアから見えてくるもの〜 1. Narratively 「Narratively（ナラティブリー）」はビジュアルを全面に打ち出したデザインで、トップページも記事ページも見やすく美しいです。このようなビジュアル・ストーリーテリングを発信するメディアやプラットフォームは増えてくると思います。 Narratively | Human stories, boldly told. 2. OZY 「OZY（オージー）」は、ミレニアル世代（主にアメリカに
味気ないウェブデザインに動きを加えて魅力的にする5つのデザインテクニック
Techniques for Creating Motion in Web Design 下記は各ポイントを意訳したものです。 魅力的なウェブページをつくるポイントはモーション モーションを生み出す4つの方法 1. 構成 2. フレームと配置 3. 編集 4. エフェクト 5. テキスト 魅力的なウェブページをつくるポイントはモーション 誰もが魅力的なウェブページを作ることを望みます、そのゴールを達成する最も効果的な手段は「Motion: 動き」を加えることです。これはビデオやアニメーションだけのことではありません、素晴らしいデザイナーはビデオやアニメーション無しで「Motion: 動き」を生み出すことができます。もちろん、ビデオやアニメーションが効果的な手段ではない、ということではありません。 ここでは、ビデオやアニメーションを使用しないで、ウェブページを魅力的にする「Motion: 動
デザインが苦手な人も分かる「デザインは全て意味がある」6つの要素
元々これはwebcre8が人にデザインを教えるとき、「細部まで考えて考えて決定するからこそデザイナなんだよ」と言う事を伝えたいが為に書こうと思ったものです。熟練者の方も、読んで同様に思われましたら是非教育に使ってみてくださいｗ はじめに：デザインとは webcre8は「webデザイン」の門扉を叩いてから3年程。まだまだこの世界ではwebの先輩方から学ばせてもらうばかりですが、曲がりなりにも「デザイン」というもの自体とは長く向き合ってきたつもりです。 webcre8の考えでは、例えばゲームのキャラクタの服の飾りであろうと、安売りの札の配色であろうと、webデザインのレイアウトであろうと、とにかく「デザイン」という作業は「なぜそれをそうするのか」という思考の戦いであると、今はそうなっています。 だから今webcre8自身が向き合っているのはたまたまwebデザインですが、このこと自体は建築デザイ
デザイナー必見！アナタにとっての『見たことも無いデザイン』を探すことが出来そうなサイト色々！ | バンクーバーのうぇぶ屋
WEBサイトを作る時、アイデア出しに詰まったりするなら参考になりそうなサイトを探したりするのもアリだと思いますが、たまには『WEBデザイン』の枠を超えた所からアイデアなんかが思いつくこともしばしばかと思います。 特にスペシャルコンテンツ的なサイトを作るときには、時として奇抜なアイデアや見たことも無いようなインパクトを必要とされる事もしばし。そんな時僕は一度“WEBデザイン”のことを忘れ、WEBデザイン以外のギャラリーや専門サイトを見る事も少なくはありません。 配色ルールなんかをインテリアやファッションデザインからヒントを得る的な記事も前に書かせてもらいましたが、似たような事かなと思います。たまにはWEB以外のデザインに目を通して違う発見やアイデアを得るための時間を作るのも面白いものですよー！ というわけで、今回は海外WEBデザインギャラリーまとめに続きまして続編的に書いてみようかなと、前回
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
みなさんが「ここの作成会社はいいサイト作ってるなー」って感じるweb作成会社を教えてください。いろいろ探してるけど、いかにも商業的で微妙なやっつけ仕事の会社しか見当たらないです。カヤックやキノトロープなどの大手よりも、できれば小規模の会社で教えてくれると嬉しいです。よろちく
みなさんが「ここの作成会社はいいサイト作ってるなー」って感じるweb作成会社を教えてください。 いろいろ探してるけど、いかにも商業的で微妙なやっつけ仕事の会社しか見当たらないです。 カヤックやキノトロープなどの大手よりも、できれば小規模の会社で教えてくれると嬉しいです。 よろちく
webサイトの企画書や提案書のサンプルを見たいのですが、提案書や企画書がまとめられているサイト等知っている方がいましたら教えていただけないでしょうか？
webサイトの企画書や提案書のサンプルを見たいのですが、提案書や企画書がまとめられているサイト等知っている方がいましたら教えていただけないでしょうか？
レスポンシブWEBデザインで作られたWEBサイト26選 | designaholic
最近、注目度のあがってきているレスポンシブWEBデザインで制作されたWEBサイトのまとめです。 remy-responsivepxを利用するとPC上でいろいろなデバイスでの見え方をプレビューすることができます。 asuonline hvanimalhospital fork-cms 10k.aneventapart jonwhitestudio foodsense jasonsantamaria spigotdesign thomasprior デザインの時点で各デバイスごとの見え方やマークアップの仕方を想定しながら作らないといけなそうですね。 26 Responsive Web Designs
秀逸なFacebookファンページデザイン集４０:phpspot開発日誌
40 Great Examples of Facebook Fan Pages 秀逸なFacebookファンページデザイン集４０ 予めレイアウトが決まっていますが、各社違和感なくかつ美しくデザインしているところが素晴らしいです。 最近自分のまわりでも殆がFacebookをやっているような状態で、今後もユーザ数が増えていきそうなFacebook。 ファンページ作成に関するデザイン力なんかも求められる時代になってきそうな気がします。 大手企業のきれいにデザインされたページがまとまっていましたので参考にできそうです。 各社デザインがいいのも去ることながら、Facebookファンページという仕組み自体も、Facebook自体の世界観を壊すことなくサードパーティのコンテンツを載せられているという意味でうまく出来ているなぁと感心してしまいますね。 関連エントリ facebookのファンページ用ウィジェ
「はてブ」アプリ開発裏話も。はてなスタッフのオススメ Chrome ウェブアプリ 15選 - はてなニュース
5月16日、Chrome ウェブストアの日本版がスタートしました。ウェブストアには、Googleが開発したWebブラウザ「Google Chrome」に“インストール”する形式のウェブアプリが大量にそろっています。新しいもの好きのはてなスタッフ3人は早速、仕事に使えそうなアプリから暇つぶし用のゲームアプリまで、いろいろなアプリを試してみたようです。3人でオススメアプリを持ち寄り、座談会を開催しました。 （※この記事は、グーグル提供によるPR記事です） Chrome ウェブストア - アプリケーション、拡張機能、テーマ Chrome ウェブストア日本版スタート！ はてブディレクターがGoogleに聞いてみた - はてなブックマークニュース ——司会の深山です。皆さん、本日はお時間ありがとうございます。まずは軽く自己紹介をお願いします。 id:chris0043（くりす）とid:chira_r
960 Grid System
960 Grid System Download - CSS, sketch paper, and templates for: Acorn, Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, QuarkXPress, Visio, Exp Design. Repository at GitHub. Essence The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns,
Fonts In Use – Type at work in the real world.
Advertising (1830) Album Art (3527) Art/Illustration (462) Booklets/Pamphlets (2026) Books (5572) Branding/Identity (6907) Ephemera (1062) Exhibition/Installation (935) Film/Video (887) Infographics/Maps (487) Magazines/Periodicals (1641) Mobile/Tablet (766) Newspapers (255) Object/Product (958) Packaging (2043) Posters/Flyers (4846) Signs (1851) Software/Apps (285) Web (4689) Acumin (54) Adobe Ca
Webデザインの“ブブン”を集めたブブンデザインアーカイブ 公式サイト
タグ一覧 タイトルロゴ(159) プライマリナビゲーション(72) グローバルナビゲーション(246) メインビジュアル(95) 見出し(326) 文字装飾(10) アクセント(29) サイドメニュー(142) ログインフォーム(68) タブ(55) テーブル・表(23) 地図(12) 特集バナー・内部リンク(525) Twitterアイコン・バナー(64) RSSアイコン・バナー(41) フォーム(9) アイコン(195) ＜前へ 次へ＞(12) 検索窓(149) パンくずリスト(12) このページのトップへ戻る(52) フォントサイズ変更ボタン(34) 問合せ・送信・購入ボタン(72) 電話番号(41) フッター・コピーライト(99) ニュース・ポータル・検索(207) ファッション(200) 音楽・ゲーム・コンテンツ配信(58) ネット関連サービス(86) オンラインショップ(308
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
見出しデザイン.com -Webデザインの“見出し”を集めたサイト-
ネットで見られる提案書のまとめ | Webデザインのタネ
http://designaholic.cc/2011/11/web-12.html
http://smashingshare.com/2010/08/02/showcase-of-apple-ipad-ready-websites/
iPhoneデザインボックス