日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイトです。
![Responsive Web Design JP(日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト)](https://cdn-ak-scissors.b.st-hatena.com/image/square/0400002bd34f0985d5aa9c96edbe1bb9ff3dcda0/height=288;version=1;width=512/https%3A%2F%2Fresponsive-jp.com%2Fwp-content%2Fthemes%2Frwdjp%2Fimages%2Ffb_logo.jpg)
2013年 04月 19日 IAシンキングとは -information architecture- カテゴリ: IAシンキング タグ:IAサイト構築サイト設計 サイトの設計、情報の整理、SEO、UI。Webサイトの構築時に考えるべきことはたくさんありますね。世のWebデザイナーの方やディレクターの方、インハウスの方など、色々な 役割の人がそれぞれの観点から情報を整理したり、競合サイトを調査したりと様々な事をしています。 しかしそれらを行うにあたって明確なフローが決まっているか?と言う割りとそうではなく、多くの人が意識的レベルでそのフローを行なっているのではないでしょうか? それらのフローを意識レベルで行えるということは非常に素晴らしく、欠かすことが出来ないスキルであることは間違いありません。 ですが、プロジェクトに参加するメンバーのスキルやレベルは必ずしも一致しているとは限らない為、ひと
2013年は更に レスポンシブ は流行ではなく 一つのデザイン定義として定着する年なのではないかと。 その定着する新しい手法のデザインの作り方と SEO 、 UX の観点から考察していきたい。 レスポンシブwebデザインの基本 レスポンシブwebデザイン とは 1ファイルでどんなデバイスでも柔軟に対応する事が出来る手法です。 この手法が編み出される前は、端末別等で違うCSSファイルを呼び出し、デザインを変えていたかと思いますが、このやり方だとデザインを変更する時に端末別に分けた分のデザインを変更しなくてはなりません。 レスポンシブwebデザイン もそうゆう意味では変えなくてはならないのですが 横幅の計算でデザインしていきますので変更点が少なくなります。 初めは リキッドデザイン と似ていると感じると思いますが、違いはこちら ■リキッドデザイン これで レスポンシブwebデザイン とはなんぞ
2013年3月25日 アクセシビリティ 昨年少しの間ですが入院しました。その間は大人しくしていればいいものを、脊髄麻酔や鎮痛剤が効いて苦痛のない時は退屈なもんで、Webサイト閲覧・メールチェックなどはしていました(私の行きつけの病院はインターネット利用可)。しかし体が思うように動かないので、今までどおりWebサイトを閲覧するのは困難。その時初めてアクセシビリティの大切さを身を持って感じ、それから少しずつお勉強している次第です。今回はWebサイト閲覧におけるアクセシビリティについて考えてみようと思います。 ↑私が10年以上利用している会計ソフト! Webアクセシビリティとは 「アクセシビリティ」とは、アクセスのしやすさを意味する言葉で、転じて利用環境や身体の制約に関係なく誰でも使えるという意味で使われます。どのような状況でもWeb上のコンテンツや機能を十分に利用できるWebサイトを「アクセシ
レインボーカラー増えてるよね? 先に言っておくと、この記事は「レイボーカラー」「レインボーカラーを採用しているWebサイト」をdisっているのではない。むしろ好きだし、いま自分が制作しているWebサイトでも採用しているくらいだ。 ただ最近、「レインボカラー」のを用いたデザインのWebサイトがすごく増えているような気がする。まずは下記を見て欲しい。 ※この記事での「レインボーカラー」は「赤・橙・黄・緑・青・藍・紫からなる7色」という意味ではなく、バラバラの色が4,5色以上並んでいる「レインボーっぽいカラフルな色の組み合わせ」という意味でとって頂けたら嬉しい。 ▼ nanapiのヘッダー ▼ vimeoのヘッダー ▼ vimeoのフッター ▼ vimeoのモーダルで動画を表示した際の見出し ▼ NHN Japanディレクターブログ(旧ライブドアブログ)の本文中の見出し ▼ pixiv
前の記事で、なぜwebデザインは安く見られてしまうのかという問いに対し、 ・参入障壁が低く見える ・ノウハウが広く、速くシェアされやすい ・制作物という点だけにおいて、デザイン作業が定義されてしまっている。 ・効果が一目瞭然ではなく、評価しづらい。 ・需要(発注者)と供給(制作者)のうち、現状では供給が多い という点で技術価値・優先順位・価格が低くみられてしまうという現状について述べた。 現状はたしかにそうなんだけども。 かけるべきときにはかけようぜ!というのが私の趣旨である。 前記事でものべたとおり、期待効果が一目瞭然ではないためデザインの価値は本質的にわかりづらいものだ。 今回はその見えづらい、webデザインの価値について、自分が現場で思った所を書いていこうと思う。 デザインの成功例 Google Apps logo ring of happiness / adria.richards
突然ですが。webサービスにおける、webデザインの費用対効果について、しばらくつらつらとかいて行こうと思う。 きっかけは、デザインについての「デザインは安くすませられるよね」という社内認識にあらためてふれたことだった。 「違う、違う、そうじゃ そうじゃなーいー!」と鈴木雅之ばりに私は叫びたいものの、ポジショントークにもうけとられかねない。唇ふさいで何もいわせない、とかできないしさ。感覚として大事さはわかってるけど、それは人に論理的に伝えないと組織なんて動かない。 ならば、webサービスで利益を得ている組織(弊社はEC)において「なぜデザインは大事なのか?なぜ費用をかける必要があるのか」を徹底的に考えようと思った次第である。 ※ここでいうwebデザイン=成果物としては制作者側の納品データ。PSDやAI、htmlやCSS、jsや画像などを意図しています。 まず、前提にある問題意識「なぜ、we
ぼうくん | VoQn 🎨 @VoQn ちょいと待った。「メンテナンスが楽」「一貫性のあるデザイン」「親切、安心設計の操作性」とか大嘘すぎる。それらは本気でやった場合のみ叶うものでパラダイムが持つメリットじゃない / “レスポンシブWebデザインのメリット、デメリット比較ま…” http://t.co/SJOVjnbK 2012-11-13 07:07:27 ぼうくん | VoQn 🎨 @VoQn RWD でメンテナンスが楽とか何寝言いってんの、っていうかそもそも昨今の RWD 採用例はだいたい単発の使い捨てスペシャルサイトかリニューアルで作ったばかりでメンテナンスコストの検証どこも出来てないだろ 2012-11-13 07:09:51
By OliBac コンピュータが色に名前を付ける時、数字やアルファベットを6つ並べた1677万7216通りの組み合わせで表される16進数カラーコードが使われます。カラーコードは他のコンピュータ言語と同じく論理的なシステムに基づいて作られるため、Webデザインを行う人間にとって16進数カラーコードを知っておくことは非常に助けになるとして、WebデザイナーのBen Gremillionさんがカラーコードの仕組みや便利なテクニックをまとめているのが「The Code Side Of Color」です。 The Code Side Of Color | Smashing Coding http://coding.smashingmagazine.com/2012/10/04/the-code-side-of-color/ そもそもスクリーン上のカラーは指定がない場合は黒いままで、16進数カラーコ
端末の多様化がますます加速しています。ここ数ヶ月のニュースをみただけでも、AmazonのKindle、AppleのiPad mini、GoogleのNexus、MicrosoftのSurfaceなどの端末が紙面をにぎわしています。こうした端末「超」競争時代にどうやってWebサイトを構築したらよいのか。また、Twitterのように、モバイルユーザーがPCユーザーより増えているサイトも存在しています。 この対応策として、レスポンシブWebデザインという手法が生まれました。レスポンシブWebデザインは、1枚のHTMLで、あらゆる端末に適応させる手法です。一方で、従来から行われている手法に、最適化した専用サイトを用意する手法があります。 レスポンシブWebデザインをめぐる動き 2012年6月にGoogle ウェブマスター向け公式ブログで、『Google がお勧めするスマートフォンに最適化されたウェ
定義がいまだ曖昧 何を指して「レスポンシブ」なのかと。 モバイルファーストという考え方は素晴らしいです。レスポンシブとするならば、やはり制限のあるスマホでの閲覧は考えるべきで、そこにどうアプローチできるかは優先的に考慮しなければ、そもそもRWDを取り入れる必要性は無いわけですから。 いや、スマホでのアクセス見込みは切り捨てで、おまけ程度で見せたいからRWD採用って手も無くは無いか・・・ 極端な話、こういったサイト、プロジェクトならばPC閲覧時のデザイン、装飾は極限までにそぎ落とし、スマホ閲覧時にどれだけ快適にできるか、つまりPCサイト(PC表示時)はシンプルで良いんじゃないかなと思います。(この時のポイントは企画段階時のRWD導入の見極めかなと思います) しかし、PC閲覧の最適化が後回しになり、最終的にPC閲覧時、特にまだまだ使用率の高い解像度1024、1280(共に横)などでの閲
レスポンシブWebデザイン案件のワークフローが従来通りではなさそうなことはなんとなくわかる。 でも、デザインなしでいきなりコーディングだとか、コーディングしながらデザインだとかは、Webにあまり詳しくないクライアントさんのお仕事で、デザイナーとコーダーも分業体制、という状況では、なかなか実現できない…… という、恐らく受託サイト制作では一般的であろうシチュエーション。 そんなときに、比較的スムーズにレスポンシブWebデザイン案件を進められるだろうフローを考えてみました。 ■最初にレイアウトパターンを絞る 画面設計の最初の段階で、サイト内のレイアウトパターンを決めます。 3パターンに収まるのが理想です。 メインページ:ヘッダ/フッタ、ナビゲーション、メインコンテンツ ┗見出し複数レベル、本文、箇条書き、表、画像配置例、リンク・ボタン例 付き 一覧系ページ:ヘッダ/フッタ、ナビゲーション、メイ
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く