最近のWebデザインで採用されているページレイアウトやUIの新常識がチェックできる素材のまとめ
最近のWebのUIはフラットデザイン・Material Designが着実に進化し、シンプルでコンテンツにフォーカスされたデザインが定着してきました。テキストは読みやすく、写真はより大きく使用されています。レイアウトは縦長型やカード型の人気が高く、デスクトップでもスマホでもスクロールを前提にしたデザインが主流となっています。 最近のWebデザインで採用されているページレイアウトやUIの新常識がチェックできる素材やプレビューを紹介します。 Boring Cards UI Kit PSD、個人・商用利用無料。 Bootstrap 4でも新しいコンポーネントとして注目されているカードを使用したUIキット。黄金比をベースにしたデザインはさまざまなサイズ・カラーで展開することができます。
しっかりと理解しておきたい！レスポンシブWebデザインを使いこなすための9つの基本原則
レスポンシブWebデザインは、デスクトップやスマホやタブレットなどさまざまなサイズのスクリーンの問題に対する素晴らしい解決方法です。 レスポンシブWebデザインをより深く理解するための基本原則を紹介します。 9 basic principles of responsive web design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 レスポンシブWebデザインのツールもリリースされているので、ぜひ！ FROONT -Responsive Web Design Tool レスポンシブとアダプティブ Webデザイン フロー 相対的なユニット ブレイクポイント 最大限と最小限の値 オブジェクトのネスト モバイルファースト or デスクトップファースト Webフォントとシステムフォント ビットマップ画像とベクター レスポンシブとアダプ
WordPressのトップページを雑誌や新聞のような段組にする方法
WordPressのブログは一般的に記事タイトルと記事の概要が単純に縦に並ぶだけですが、jQuery Masonry という jQuery プラグインを使用すると、このブログのトップページのように雑誌や新聞のような段組で記事一覧を並べることができます。 jQuery Masonry は WordPress 用に作られたわけではありませんが、WordPress テーマに組み込んでトップページ等で使用することができます。 ただ、公式のドキュメント通りに JavaScript を書いただけでは WordPress テーマではうまく動かないので、やり方をここにまとめておきます。 ここでは、WordPress 3.3 のデフォルトテーマ「TwentyEleven」をベースに解説します。 準備 まず jQuery Masonry 公式サイト のページ中央にある「Download the script
CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ
最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で
webデザインにおける視線誘導のおはなし | 07design.blog
こんにちは。今回はレイアウトの記事を書きます。「グーテンベルク・ダイヤグラム」という言葉をご存じでしょうか。 なんだかすごく中二心をくすぐられる言葉ですね。「グーテンベルク・ダイヤグラム」とは均等に配置された同質の情報を見る際の、・・・こんにちは。今回はレイアウトの記事を書きます。 「グーテンベルク・ダイヤグラム」という言葉をご存じでしょうか。 なんだかすごく中二心をくすぐられる言葉ですね。 「グーテンベルク・ダイヤグラム」とは均等に配置された同質の情報を見る際の、一般的な視線の流れのパターンを表した図式のことです。 簡単に言うと「人間の目は左上から右下方向へ、チラチラしながら遷移する」というものです。 こういった視線の流れのパターンは、エディトリアルデザインなどでは当たり前に使われている技法・考え方らしいです。 テキストをレイアウトする場合には、左上・右下に重要なコンテンツを配置す
iPhoneやiPadでも綺麗なレイアウトで表示されるWebサイトを制作する為のスターターキット・Skeleton
なかなかシンプルで良かったので ご紹介。人気のデバイス、iPhone やiPadで閲覧してもレイアウトを綺麗 に保てるように設計されたWebサイト のスターターキット。内容物はHTML、 CSS、JavaScriptです。 シンプルな構成ですが、欲しい部分は用意してくれている、と言った感じのスターターキット。なかなか気に入ったのでデモを作りました。 HTML+CSSのシンプルなフレームワークです。グリッドレイアウトを使った美しいレイアウトで、Media QueryによるiPhone / iPadでのアクセス時のレイアウトも最適化されており、jQueryで作るタブコンテンツのサンプルコードもあります。 デモ作ったので、宜しければお好きなデバイスでアクセスして見てください。 Sampleサイト※別窓 iPhoneでアクセス iPhoneでアクセス。 ランドスケープ iPadでアクセス iPad
[CSS]IE6/7でも動作する、可変レイアウト用グリッドシステム -Flurid
IE6/7でも動作する数少ない、可変レイアウト用グリッドシステムのCSS/JSのフレームワーク「Flurid」を紹介します。 Flurid - The Fluid CSS Grid [ad#ad-2] FluridはCSSベースで開発された可変レイアウト用グリッドシステムのフレームワークで、jQueryのプラグインとしても開発されています。 Fluridの対応ブラウザ Fluridの対応ブラウザは下記の通りです。 Internet Explorer (Windows) - versions 6.0 - 8.0 Mozilla Firefox (Windows/Linux) - versions 1.0 - 3.6 Fluridのデモ デフォルト Fluridのデフォルトのレイアウトです。
デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則
このブログ、Webデザインレシピのデザインをリニューアルしました。 この機会にデザインを勉強したことがない人でも、楽しくデザインをすることができるかもしれない、基本原則 4つをご紹介します。 この原則は「ノンデザイナーズ・デザインブック」著者 Robin Williams で詳しく解説されています。 古い本ですが、とっても素晴らしい本で今では新装増補版となって発行されているようです。 今回、このブログ – Webデザインレシピのデザインを、ガラッと変えてみました。これを機会にちょっとデザインの基本というか、デザインをするときにガイドとなる、4つの原則をおさらいしておきます。Webデザインに限らず、会社で提出する報告書や学生さんのレポート、レストランのメニューなど、ページと呼べるものには全部当てはまると思うので、Webサイトを作るとかじゃなくても、知っておいて損はないかもしれませんね。 せっ
無駄なdiv要素やclassだらけのマークアップから卒業する方法
グリッドベースのレイアウトを作成すると、ついついdiv要素を多用してしまいがちですが、意味のあるデータにはそれに適した要素を使用し、無駄なdiv要素やclassだらけのマークアップから卒業する方法をWebdesigner Depotから紹介します。 Fight Div-itis and Class-itis With the 960 Grid System 下記は各ポイントを意訳したものです。 はじめに CSSのフレームワーク：960.gsの場合 classの乱用を避ける リスト要素の使用 画像とキャプションの使用 複数の見出しとパラグラフの使用 子要素のclassは親要素に はじめに 数年前までウェブページの設計はテーブルがスタンダードでした。そしてCSSはそれを大きく変え、今日ではCSSのフレームワークがウェブページの設計を容易にしてくれています。 しかしながら、このCSSのフレームワ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://designaholic.cc/2011/03/web40.html
ソシオメディア | UIデザインパターン