2014年7月30日におこなわれたADC MEETUPでのセッションのスライドです。 Photoshop CC 2014を使用することを想定した内容となっています。Read less
コーディングを考慮したWebデザインガイドライン
2014年7月30日におこなわれたADC MEETUPでのセッションのスライドです。 Photoshop CC 2014を使用することを想定した内容となっています。Read less
Web系メモ - ナイスデザインな地方自治体サイトリンク集
このページについて 地方自治体、関連の公共機関のサイトから、管理人が個人的にデザインが気になるなと思ったサイトをテキトーに選んでいます。同僚（誰）らのための、デザインに詰まった時にながめる実例集かもしれないです。デザインだけでないサイト（謎）はCSS な公共・商用サイトリンク集にありますので、あわせてご利用下さい。付記したコメントは自分用備忘メモです。特に注記のないものは、2002年8月20日、9月17日ごろに捕捉したものです
自治体サイトランキング | Gomez -Webサイトランキング・評価・構築サービス-
総合得点2010年3月自治体サイトランキングの総合得点による順位1位～20位は以下のとおりです。このランキングは、2010年3月10日までの各自治体サイトの情報をもとに評価をしています。主要項目調査で一定基準を満たした170サイトのうち、上位50サイトをランキングにノミネートしています。カテゴリ別順位、都市タイプ別順位については右側の各項をクリックして下さい。 21位以下はこちら 上位サイトの特徴 総合得点1位～20位21位～50位上位サイトの特徴 順位 得点 サイト名 サイトの使いやすさ 情報の公開度・先進性 サイト 1 8.54大阪市（大阪府） 8.66（1位） 8.41（1位） 2 8.31三鷹市（東京都） 8.62（3位） 7.99（7位） 3 8.27相模原市（神奈川県） 8.22（20位） 8.32（2位） 4 8.22神戸市（兵庫県） 8.31（15位） 8.13（4位
結果を出すWebデザインの考え方勉強会（スライド） - よつば手帖
コワーキングスペース恵比寿さんの場所をお借りして、「結果を出すWebデザインの考え方」勉強会を開催しました。 ※タイトルは中畑さんに名付けていただきました。 技術的なノウハウは共有されてますが、デザインの考え方や俯瞰で見ながらのサイトの作り方などの情報はあまり見かけないのでやってみました。 専門的な技術もあるにこした事はありませんが、デザインに大事な「考え方」をしっかりと意識していただければ誰しもある程度のデザインは出来るようになると思っています。 上記のスライドについてお話した後に、打ち合わせで実際に行われるようなやりとりと、実際にデザイナーや制作会社はどう考えて提案しているかを解説しながらその場でサムネイル（絵コンテ）を描かせていただきました。 個人的に改善策を一度に数サイトに対しておこなうような事はなかったので、とても良い刺激になりました（疲れました）。 ご参加いただいた皆さん、あり
人はなぜ角丸に魅かれるのか、その理由と角丸の効果的な使い方
ウェブのインターフェイスだけでなく、現実の世界でもたくさんの角丸を目にします。角丸は一時のトレンドではなく、デザインのスタンダードと言ってもよいでしょう。 そんな角丸がなぜ好まれるのか、どう使えばよいのか、ウェブページにどのように実装するのかなどを紹介します。 Rounded Corners and Why They Are Here to Stay 下記は各ポイントを意訳したものです。 角丸は目に、そして脳に優しい< 角丸のイメージは安心 -Appleのこだわり 角丸はいつ使用するべきか 角丸の実装：CSS3< 角丸の実装：古い方法 終わりに 角丸は目に、そして脳に優しい ビジュアル認知の権威：Jürg Nänni教授によると、『鋭角の長方形は同じ大きさの楕円より認知するのに努力を必要とする。人間の目は円形のものをより速く捉えることができる。」と述べています。 鋭角と角丸の視線の流れ 鋭
ディレクターが指摘すべきデザインの注意ポイント10個
ずいぶん久しぶりの投稿になってしまいました。申し訳ない。 今回はタイトルの通り、ワイヤー上がった！デザイン依頼した！で上がってきたデザイン案（もしくはモックアップ）を見て、その段階でディレクターが何を「確認」すればいいのか？という内容についてです。 もちろん経験を積む。もしくは自分自身でデザイナーも経験するなどの機会に恵まれれば大丈夫なんですが、僕みたいに「いきなりWebディレクターという肩書きを与えられてしまった人」は、デザインの何を確認すれば良いのか分からなくなってしまうケースも多いんじゃないかな？と思って書いてみました。 実際にはマークアップ後まで影響してくるので、もっともっと項目は伸びると思うのですが、ひとまず僕が注意して見ているポイントを10個ピックしています。 色数を使いすぎていないか あれもこれも！と欲張りすぎて、結局なにが「一番強調したいのか」が分からなくなってしまっている
人と違うデザインのサイトをスクラッチで作るならHTML KickStartをベースにするといいですよ！ | Chrome Life
みなさんは、サイトをスクラッチで作る時にどうされていますか？ HTMLやCSSをイチから作り込んでいくのは大変ですよね。 フリーでHTMLやCSSのテンプレートもいろいろありますが、デザイン要素がガチガチで修正しづらかったり、あまりにもシンプルすぎて結局ゴリゴリ作らないといけなかったりします。 最近だと、Twitter Bootstrapが使いやすくて、いろんなサイトでも使われています。 特にウェブ系のスタートアップは、ほとんどがTwitter Bootstrapをベースにしているんじゃないかというぐらいよく目にします。 しかし、どれもこれも同じような見た目になっちゃってて、デザイン的にはちょっと残念な感じがします。 Twitter Bootstrapを使うと、なぜここまで似てしまうのか？ それは、 パーツが完璧に揃いすぎている！ のが原因です。 Twitter Bootstrapがバージ
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
「●」が小さく見えることがあるのはどうして？ - 帰ってきた💫Unicode刑事〔デカ〕リターンズ
（ホー先生）Macの画面で「●▲■」の「●」と「■」だけが小さく見えることがあるのはなぜじゃ*1。 「●」と「■」が欧文フォントで表示されているからだよ。たとえばMacのFinderでは、ファイル名は「Lucida Grande優先」で表示される。Lucida Grandeは「●（U+25CF）」や「■（U+25A0）」のグリフを持っているけれど、「▲（U+25B2）」のグリフを持っていない。だから「▲」はヒラギノで表示されて、「●」と「■」だけが小さく見えるんだ。同じ理由で起きる現象としては、三点リーダの位置が下にズレたりすることも、よくあるよね。 Finder以外でもよくあるんじゃが。 Appleのソフトは世界共通の仕様なので、デフォルトは欧文フォントだよ（下図）。 日本語フォントを指定すれば、この問題は避けられるのか。 うん。Finderでは基本的にフォントの変更はできないけどね。そ
WEBデザインをとにかくたくさん見たい人の為のまとめ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
ウェブデザインのマンネリ化から抜け出したい人のためのリンク集
ウェブサイトでよく使用されるエレメントやデザインのアイデアをコレクションしている、インスピレーションを与えるサイトを紹介します。
サイトのデザインは54%が「好みで決定」、27%が最後に上司にひっくり返され、90%は消費者の意見を参考にせず／デザイン決定プロセス調査 | Web担当者必見！ リサーチ データ&市場調査レポート
参考意見としてターゲット消費者の意見を取り入れているのは10%に過ぎず、90%が消費者の意見を聞かずにデザインを決定している。 デザイン決定のポイントは、「発注側の経営者・上司・担当者の好み」が54%。「サイト制作のゴールを達成できそうだから」（20.7%）の倍以上の割合で「好み」を優先。 27.3%が「発注側の経営者や上司の独断的な意向で最終決定の直前にデザインがひっくり返った」ことで困った経験がある。 これは、デザイン決定のプロセスをビジネス目的に対して最適化するための消費者評価（アンケート）ソリューション「CREATIVE SURVEY」を提供する株式会社フォーデジットとWeb担当者Forumは、共同で行った、「Webサイトのデザイン決定プロセスに関する調査」の結果のハイライトだ。 この調査は、企業サイトの制作において、デザイン決定がどのように行われているのかを調べることで、ビジネス
25 Examples of Wireframes and Mockups Sketches | inspirationfeed.com
You are here: Home » Inspiration » Design Elements » 25 Examples of Wireframes and Mockups Sketches 25 Examples of Wireframes and Mockups Sketches Written by Igor Ovsyannykov on Feb 14, 2011 | 0 Comments Would you start building a website without blueprints? If you said yes, good luck with that. If you said no, then you are 100% right! Before building any website you have to have an idea of how th
効果的にコンテンツを配置する代表的な3つのレイアウトとは
ウェブデザインでもよく使用される、ユーザーの視線の動きを予測し、効果的にコンテンツを配置する代表的な3つのレイアウト、グーテンベルグ ダイアグラム、Zパターン、Fパターンを紹介します。 3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern [ad#ad-2] 下記は各ポイントをピックアップして意訳したものです。 グーテンベルグ ダイアグラム Zパターン レイアウト Fパターン レイアウト Pattern of Focal Points -情報の階層化 グーテンベルグ ダイアグラム グーテンベルグ ダイアグラムとは、均等に配置された同種の情報を見るときの視線の動きを一般的なパターンにしたものです。 これは特に、テキストの比重が高いコンテンツにはまります。 グーテンベルグ ダイアグラム グーテンベルグ ダイアグラムは4つの象
実践! WEBビジュアルデザイン 第1回「デザインプロセスの落とし穴（前編）」 - MdN Design Interactive
2010年12月17日 TEXT：文＝田口 亮（（株）フォーデジット） Webデザインに必要な知識や考え方は、普遍的なものもあれば、案件やクライアントによって変化する部分もある。PCやネットの技術やトレンドの変化によっても変わっていく。そのような知識や考え方、取り組み方を学び、考えるうえで大事なことは、現場で役に立つ、実践的でリアルな知識を得ることだ。 そこで本連載では、Webデザインの現場で役に立つ、実践的なWebビジュアルデザインのトピックや考え方、取り組み方について考えていく。 ふだんWebをデザインしていて、デザインがうまく決まらなかったり、なんとなく全体的に良くない、デザインが迷走してしまうことがある。そこで今回は、そのような“デザインでハマるツボ”をいかに回避するかについて、Web制作のビジュアルデザインの現場の目線で解説する。 ■デザインが危ない！ デザインや制作は時間がなけ
最適なテキストリンクの色は？ | ウェブ力学
青系統の色が使われていることに変わりはありませんが、検索エンジン以上にバラつきが見られます。特に、Yahoo!の場合は、各ジャンルごとのページでも微妙にテキストリンクの色が変わっていました。それぞれのサイトデザインの特徴に合わせて変化させているのだろうと思います。 楽天のようにデフォルト色を使用しているサイトもありましたが、全体からすると少数派のようです。 Q&Aサイトの最大手OKWaveはGoogleと同一でした。また、ユーザビリティといえばビービットさん、ということで調べてみましたが、やや暗めの青を使用していました。ビービットさんのことなので何か意味があるのかもしれません。 クックパッド クックパッドは、日本最大級のレシピ検索のサイトです。ユーザービリティには細心の注意を払っていて、ユーザー一人当たりの平均PVが高いことでも知られています。 そんなクックパッドですが、サイトをのぞいてみ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
特集｜Webユーザビリティランキング2011自治体サイト編｜トライベック・ストラテジー
日本のWEBデザイン糞すぎワロタｗｗｗｗなんで2003年ぽいんだよwww：キニ速
UI＆UX / 重要なのは、毎日さわって嬉しい UI UX!
http://e0166nt.com/blog-entry-889.html
