認知負荷の増加がWebサイトに与える悪影響
Paul Boag氏はユーザー体験デザイナー、サービスデザインコンサルタント、およびデジタルトランスフォーメーションのエキスパートです。非営利団体や企業向けに、デジタル体験の改善を目指す支援をしています。 あなたのWebサイトは、訪れるユーザーにあれこれ考えさせすぎてはいないですか？ ユーザーに大きな認知負荷をかけていて、それによってユーザーがあなたのWebサイトから離脱していっている、ということはありませんか？ もしそうならば、これは修正すべき問題で、実際に修正が可能です。 認知的な負荷による影響 この問題はWebデザイナーである私たちと明らかに密接に関連しています。ユーザーが１つのことに集中しすぎて、他の要素に気が付かなかった場合、Webサイトでの重要なCTA（コールトゥアクション）だって気づかれない可能性があるということです。そう、ものごとをクリーンかつシンプルに整理したいというデザ
レイアウトが考えやすくなるデザインのルール ｜https://wp.yat-net.com/name
デザインには意味があります。物を配置するにしても、なぜそれを配置するのか？なぜその色味なのか？なぜそこに置くのか？など、実に多くの事を考えてデザインは行われています。 そのためデザイナーが考える事は実に沢山有り大変なのですが、デザインには決められたルールという物が存在し、「こうしなければならないルール」、「こうしてはいけないルール」と言ったものが多数存在します。 デザイナーはそういったルールを知識として蓄えているので、考えるべき点を素早く整理し形にしていくことが出来るのです。 今回はそのルールについて少し述べたいと思いますので、デザインが苦手な人も是非そういったルールについて考えてみて頂ければと思います。 レイアウト ビジュアルは左、テキストは右 人間の脳は左側に配置されたものを感覚的に美しいと感じやすく、右側に配置されたものを理論的な思考で捉えやすくなっています。そのため上記のような写真
なぜ日本のWebデザインはダサいのか？ | Goodpatch Blog
こんにちは！ みなさんQuoraというサイトをご存知ですか？QuoraはFacebookの元CTO（最高技術責任者）が立ち上げたQ&Aサイトです。実名+肩書きの登録が必要なので、他のQ&Aサイトより回答者のクオリティが高い事が特徴のようです。（日本だとYahoo知恵袋が似ているWebサービス） 今回Quoraで日本のWebデザインについての興味深い質問を見つけたので、その質問と回答のいくつかを記事にしてみました。（記事ネタQuestion :Why is web design so bad for Japanese websites?） 【Question】 これまで日本のWebサイトは一般的にきれいなものだと思っていたが、実際は違った。アメリカのWebサイトより5年から10年の遅れを取っているように思えます。多くのWebサイトにFlashが使われているし、アメリカのものよりごちゃごちゃし
レスポンシブwebデザインの作り方とSEOとUXを考察
2013年は更に レスポンシブ は流行ではなく 一つのデザイン定義として定着する年なのではないかと。 その定着する新しい手法のデザインの作り方と SEO 、 UX の観点から考察していきたい。 レスポンシブwebデザインの基本 レスポンシブwebデザイン とは 1ファイルでどんなデバイスでも柔軟に対応する事が出来る手法です。 この手法が編み出される前は、端末別等で違うCSSファイルを呼び出し、デザインを変えていたかと思いますが、このやり方だとデザインを変更する時に端末別に分けた分のデザインを変更しなくてはなりません。 レスポンシブwebデザイン もそうゆう意味では変えなくてはならないのですが 横幅の計算でデザインしていきますので変更点が少なくなります。 初めは リキッドデザイン と似ていると感じると思いますが、違いはこちら ■リキッドデザイン これで レスポンシブwebデザイン とはなんぞ
DIV一個で洒落たボックスを作ってみる！最近知ったCSSを使ったボックス装飾とか色々！ | バンクーバーのうぇぶ屋
CSS3からDIV一個で出来る表現なんかも色々あるんですね。ちょっと前まで超面倒だったボックスのオシャンティーな線の装飾とかぼかしとかグラデになんやらかんやら。DIVボックス一つとっても色々な装飾効果をもたせられるなぁと思う今日この頃。 それこそ、ONE DIVのような一つのDIVで表現できるアイコンを作ってるサイトもあって、CSS3を突き詰めると色々知ることも出来て面白いなぁと思うわけです。 っていうわけで、ONE DIV程凝ったことはできませんが、今日はそんなDIV一個で使えそうなボックスの作り方をいくつかご紹介！擬似要素使ってちょっとちょめちょめしたら縫い付け効果のボックス出来たりと、以外と使えそうなものを選んだつもりなので、一度見てみてもらえると嬉しいです！ちなみに、IEチェックは9だけしてます。8とかはCSSPIE当たりで頑張ってなんとかする方向で…何か変なとこあったら直しますの
サイト制作の参考にしたい！Wordpressでつくられたウェブサイト50選
WordPressでサイトを作るときに、参考になるWordpressサイトはないものかと思ったことが一度はあるはずです。 WordPressでつくられたサイトからはデザイン・機能・運営方法まで参考になることが多いのではないでしょうか。そこで今回はWordpressでつくられたサイトを有名なところから50個ピックアップしてまとめました。後から読み返しやすいようにサイトのタイプ別に分類しています。 ※2016年3月末時点でWordpressでつくられたサイトであることに注意してください。 企業サイト・組織サイト 株式会社カカクコム 価格ドットコムなどを運営する株式会社カカクコムのコーポレートサイト。 http://corporate.kakaku.com/ クックパッド株式会社 クックパッド株式会社のコーポレートサイト。 https://info.cookpad.com/ 株式会社ベクター オ
クリエイターとして刺激されずにはいられないデザインエージェンシーのサイト色々！ | バンクーバーのうぇぶ屋
クリエイターであればオシャレなオフィスにクリエイティブな仕事、かっこいい自社サイトに名刺、自分はクリエイティブな世界で仕事をしているんだというアイデンティティを感じる事が好きな人はやっぱり多いかなと思います。 かくいう僕はその一人で、先日まだまだ先の話しではありますが、ちょっと『制作スタジオ的なヤツちゃんと持とうよ』という話しになり、参考になりそうなデザインエージェンシーの話になりました。 僕自身は憧れに近い物になりますが、そんなオフィスと案件の数々に囲まれまくった環境を作ってみたいと夢見ずにはいられません。 そこで、今日は自分自身のそんな『こうなりたいなぁ』と思えるようなデザインエージェンシーのサイトをちょっとご紹介！僕自身がいいなぁこんなサイトとかオフィスとか、って思えるようなデザインエージェンシーばかりで『いつかこうなるぞ！』と意気込む事を目的にさせてもらってるため独断と偏見で申し訳
Webデザイナーが憧れる余白が美しいWebデザイン2012年版
Ambidex 25th Anniversary... / 株式会社 細尾 / mount inc.他...全55件
参考にしたい日本人クリエイターのポートフォリオサイト 40
Warning: Use of undefined constant more_link_shrarp_remove - assumed 'more_link_shrarp_remove' (this will throw an Error in a future version of PHP) in /home/users/1/limeline/web/nnmal/wp-content/plugins/more_link_sharp_remove/more_link_sharp_remove.php on line 16 Warning: Use of undefined constant ddsg_language - assumed 'ddsg_language' (this will throw an Error in a future version of PHP) in /ho
【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜基礎編 | DevelopersIO
はじめに 早速ですがみなさん、黒い画面（コンソールやターミナル）はお好きですか？ ちなみに僕は最近やっと黒い画面に対していくつかの呪文使えるくらいになりました。文系理系でもどちらでもなくさらに低学歴の僕にとっては潜れば潜るほど黒い画面がつきまといます。（今では好きですよ、黒い画面） 今回は、すぐに使えるSCSS入門｜基礎編ということで、「黒い画面など見たくない！」というあなたにも、GUI操作だけですぐに使えるアプリケーションのインストールからSCSSの基本的な利用方法について、実際の開発に使えるポイントを押さえて解説していきたいと思います。 SCSSを覚えて生産的で楽しいWebサイト制作・アプリケーション開発をしていきましょう。 まだSCSSを知らない方向けに「SCSS」って？ 前回の記事「Media Queriesの記述を少し楽にしてくれるSCSS（Sass） Mixin（自作）」からの
デザイナー必見！アナタにとっての『見たことも無いデザイン』を探すことが出来そうなサイト色々！ | バンクーバーのうぇぶ屋
WEBサイトを作る時、アイデア出しに詰まったりするなら参考になりそうなサイトを探したりするのもアリだと思いますが、たまには『WEBデザイン』の枠を超えた所からアイデアなんかが思いつくこともしばしばかと思います。 特にスペシャルコンテンツ的なサイトを作るときには、時として奇抜なアイデアや見たことも無いようなインパクトを必要とされる事もしばし。そんな時僕は一度“WEBデザイン”のことを忘れ、WEBデザイン以外のギャラリーや専門サイトを見る事も少なくはありません。 配色ルールなんかをインテリアやファッションデザインからヒントを得る的な記事も前に書かせてもらいましたが、似たような事かなと思います。たまにはWEB以外のデザインに目を通して違う発見やアイデアを得るための時間を作るのも面白いものですよー！ というわけで、今回は海外WEBデザインギャラリーまとめに続きまして続編的に書いてみようかなと、前回
ポータルサイトのデザインをする時に意識したこと5つ - Design Color
もくじ グローバルメニューを埋れさせない 色を使いすぎない 余白を空けすぎない 囲み線を多用・強調しすぎない サムネイルに黄金比や白銀比を使ってみる 1.グローバルメニューを埋れさせない ポータルサイトは情報量がとても多いです。ユーザーを迷わせないためには、画面が遷移しても変わらずそこにいてくれる「グローバルナビゲーション」は頼りになる存在です。それが他の情報に埋れてしまってはもったいないですよね。なので、デザイン時にはまずこの子に注目してみました。 白抜きのメリット 色々なサイトを観察していると、ナビゲーションバーに白抜きを使っているサイトが多く見られました。 調べてみたところ、白抜きは小さな文字でもやや大きく見えるというメリットがあるとか。なぜなら、白は「膨張色」だからです。 膨張色とは明度が高いことから、他の色に比べて膨らんだり広がったり錯覚する色のことです。白や明度の高い暖色系が膨
200を越えるアイコンが揃ったBootstrap向けWeb Font·Font Awesome MOONGIFT
Font AwesomeはBootstrapと組み合わせて使えるアイコンを集めたWeb Fontです。 Twitter Bootstrapの便利な機能の一つにアイコンパックがあります。ちょっとした装飾を手軽に付け加えられるのは便利です。そんなBootstrapに200以上のアイコンを追加するのがFont Awesomeです。Web Fontで作られたアイコンパックです。 全てのアイコンです。 ソーシャルアイコンも揃っています。 例です。ドロップダウンやボタンにつけています。 大きさが自由に変更できるのもフォントならではです。 ドロップダウンにつけると機能がより分かりやすくなります。 カスタマイズすればレーティングに使ったりもできます。 ファイル構成です。SVGやフォントが提供されます。 Font AwesomeはTwitter Bootstrapで提供されているものに加えて色々な場面で役立
くまがモチーフになっているブランド – 癒やしさと可愛さ
くまのグッズは、アクセサリーを始めキーホルダー・ストラップ・ぬいぐるみのほか、バッグも高い人気を得ています。
JavaScriptで作られた、見たことないUIデザインのWebサイト
株式会社サイゾー（Cyzo inc.） / Raffael Stüken / La Moulade - Creative St...他...全11件
WEBデザイナーを目指す人へお勧めしたい記事・サイトまとめ ｜https://wp.yat-net.com/name
最近僕の周りでWEBデザインの勉強やコーディングの勉強を始める人が多く、そんな方々向けに読んで欲しい、見て欲しいサイトをまとめる機会があったのでブログにポストします。 ブログに置いておけばこれから先また誰かに伝える機会があってもURL一つで教えれるので便利ですよね。 Index 1.WEBデザイン全般 2.色彩・配色 3.レイアウト 4.ユーザビリティ 5.文字・文章 6.フォント 7.コーディング 8.著作権 9.グラフィックツール関係 10.チュートリアル等 1.WEBデザイン全般 [連載]Webデザイン入門（1日目）：Stocker.jp [連載]Webデザイン入門（2:スケッチしよう）：Stocker.jp [連載]Webデザイン入門（3:光とボタン）：Stocker.jp サンプルデザインでわかりやすく見る。プロデザイナーが使うセオリー10のこと。：MAKA-VELI.COM W
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作会社に飛び込んだ新入社員にとりあえず読ませたいスライド
Account Suspended
Responsive Grid Systemの仕様が変更となり、僕のレスポンシブデザインの作り方もちょっと変わりそうなので共有 | バンクーバーのうぇぶ屋
UIデザインに行き詰ったときに見るとインスピレーションが得られるサービス
