創造力と遊び心がくすぐられるHTML5でつくられたウェブサイトのまとめHTML5でつくられた刺激的なウェブサイトを紹介します。 HTML5 ADVENTURE CALENDAR MTA.ME Google Gravity [ad#ad-2] Sketch BreakDO
WebデザイナーがWebサービスのデザインをするうえで気を付けたいこと │ モノづくりブログ 株式会社8bitのスタッフブログです
株式会社8bitのスタッフブログです。こんにちは。株式会社8bitの高本です。 Webサービスを作り終わると毎回反省することは何点もあるのですが、デザインについて作る時に気を付けないといけないなと思うことを書いてみます。 Webサービスのデザインは静的なWebサイトと異なってきます。 静的なWebサイトデザインであれば、テキストや写真画像の分量などあらかじめ分かっていますので、素材を活かしてデザインすることが出来ます。 ですが、Webサービスの場合、例えばユーザーが登録や投稿をするようなサービスでは、期待している画像やテキストが入ってくるわけではありません。 実際開発が終わってテスト投稿をしてみると、「なんかデザインで見た時をイメージ違う？」というようなことが起こることもあります。 「予測されるデータパターンを洗い出して、ディレクターなど構成を考える人がきちんと考えて指示を出せ
あなたのウェブページが機能しているか7つの面からチェックできるオンラインツール -Spur
Spur [ad#ad-2] Spurの使い方 入力フォームにチェックしたウェブページのURLを入力して、「Spur it on」ボタンをクリックします。 画像でチェックしたい場合は、「Spur it on」ボタンの下にある「Upload an image」をクリックします。 クリックすると、ウェブページに7種類のエフェクトを与え、そのままでは気がつきにくい面からさまざまなポイントを確認することができます。 以下、その7種類のエフェクトを紹介します。 Grayscale グレースケールはデザインからカラーを取り除くことで、ユーザーの目がページのどこに引き寄せられるか確認するのに役立ちます。 見出しはブラックの背景にホワイトのテキストで高いコントラストを確認できます。 ロゴとナビゲーションはコンテンツサイトにドロップバックしています。 最新情報のコンテンツはグレースケールになると、コントラス
勝手にリデザイン：新宿高層ビルの館内施設案内板
勝手にリデザイン：新宿高層ビルの館内施設案内板 新宿のとある高層ビルの館内案内標識が話題に。後学のために、仕様・問題点を整理、改善案の作成を行ってみました time2011/09/08 hatenabookmark- Twitterで、あるサイン（案内板）のことが話題になっていました。新宿のあるビルの案内図のようですが、わかりづらいことが問題になっているようです。 …確かにこれはわかりません。トイレを探している時に遭遇したら結構辛いと思いますね。でも、なぜわかりにくいのか、どういう改善案が考えられるのか、もう少し考えてみることにしました。 仕様 まず、この図から読み取れる情報だけでは何が「正解」かわからないので、実際の現場に足を運んでみました。 そして、館内をぐるっと見学してみて、大体の施設の配置を把握してきました。（ちなみに、ビルの中をウロウロしてると普通に不審者だと思うので、警備員の方
twitterで話題の｢わかりにくすぎる案内版｣の改良案が続々と登場！
twitterで話題の｢わかりにくすぎる案内版｣の改良案が続々と登場！2011.09.12 17:005,194 先日、twitterで｢わかりにくすぎる！｣として話題になった、新宿にある某ビルの案内板。 これ、パッと見てトイレがどっちにあるかわかります？ ...うーん、まっすぐ行って右か、もしくは左に直進かなあと思うのですが、二通り可能性が出てくる時点で案内版としてはどうかなあという感じですよね。ここで頭を悩ませてたらお漏らししてしまう！ ということでtwitterやブログでは、さっそくこの案内版をわかりやすくするための改善案が出されているようですよ。 こちらはtwitterユーザー@mexjpさんの改善案。かなりわかりやすくなっています。パネルを配置を変えるだけでもこんなに変わるものなんですね。 これは@mizpiさんの改善案。色を変更すると一目で理解できますね。 @ryotaroxさ
HTML5のアウトラインって何？xhtmlとHTML5のコードを比較してアウトラインを理解しよう！ | HTML5でサイトをつくろう
前回のエントリーではサンプルソースを基にHTML5の新要素について確認しました。前回のエントリーをご覧になっていない方はこちらからご覧になれます。 【前回のエントリー】 HTML5は難しくない? HTML5から追加された新要素を理解しよう！【初級編 第2回：HTML5のマークアップ】 HTML5は難しくない!? XHTML1.0とHTML5のコーディングの違いを確認してみよう！【初級編：HTML5のマークアップ】 今回はそのサンプルソースからアウトラインを確認していきます。アウトラインはHTML5でコーディングする場合にとても重要な部分になりますが、構造的な話になるのでわかりにくく感じしてしまうと思いますので、アウトラインを視覚化する『HTML 5 Outliner』を利用してxhtmlとHTML５の違いを比較しながら理解を深めていきたいと思います。 アウトラインとは まずはアウトラインに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
