ブックマークしておきたい、スマホUIをコレクションしている海外と日本のサイトのまとめiPhone, Androidなど、スマホのユーザインターフェイスの参考になるギャラリーサイトを海外・国内ともに紹介します。 まずは、スマホでその操作が楽しいアニメーションを伴ったUIギャラリーから。
2014年、進化しているWebデザインのトレンドを実際に効果的に使用しているサイトともにチェックできる無料のE-Book
Webデザインの現在のトレンドの多くは2013年頃から浸透しはじめ、さまざまな形に進化し続けています。そんなWebデザインのトレンドを実際に効果的に使用しているサイトともに紹介している無料のE-Bookを紹介します。 2014年も残り半年ちょい、早いものですね。 Web Design Book of Trend 2013-2014 このE-Bookとは別に、トレンドの流れをさまざまな切り口からチェックしたい人は下記の記事も参考にしてみてください。 2014年これからのウェブ制作業界の流れ、伸びる職種、ウェブデザインのトレンドなどのまとめ E-Bookは無料で、全187ページオールカラーのPDFです。各トレンドごとに説明と、実例が15サイトくらい掲載されています。 下記に各トレンドと中身をざっくり紹介します。 1. The Era of Content コンテンツの時代 ウェブサイトのレイア
ドロップダウンやカルーセルをトレンドに合わせたアプローチに、UXから見た2014年を良い年にするための8つのポイント | コリス
「ドロップダウン メニュー」や「カルーセル」など、今日でも見かけるウェブのデザイン要素や技術など、今までの仕様ではなく、こうした方がいい、というちょっと刺激的な記事を紹介します。「ウェブページの概念」は特になるほど、と思いました。 Goodbye to 8 Design Elements Whose Time has Come 元記事のタイトルでは「グッバイ！8つのデザインエレメント」となっていますが、デザイン要素だけでなく、技術やメディアや開発環境など、エクスペリエンスデザインを中心に幅広く取り扱われています。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。海外のブロガーから他ブログでの無断翻訳・転載の声を聞くのでご注意ください。 ドロップダウン メニュー カルーセル Internet Explorer 9 スキューモフィズム Fl
2014年これからのウェブ制作業界の流れ、伸びる職種、ウェブデザインのトレンドなどのまとめ
数多くのブログで2014年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 キーワードとしては、スマフォ・タブレットなどの小さいサイズのタッチデバイス、レスポンシブ（特に画像）、HTML5/CSS3、ビッグデータ、リスク管理が注目されています。 2014年、ウェブ制作業界全体の流れ ウェブデザインの2014年のトレンド 2014年に大きく変化するウェブデザインの7つの傾向 2014年、注目度の高いIT系の職種・役割 2014年、ウェブ制作業界全体の流れ まずは、2012, 2013年と的確な予測をだしてきたsitepointの2014年のウェブ制作業界の全体の流れから。 10 Web Predictions for 2014 スマートフォン中心の年 最終的にはデスクトップからのアクセスをスマフォが超える HTML5のウェブアプリ
ぷるるん新感覚！スマフォでのスクロールが楽しくなるナビゲーション -Jelly Navigation Menu
ぷるるん新感覚！スマフォでのスクロールが楽しくなるナビゲーション -Jelly Navigation Menu
ウェブサイトの制作に必ず役立つブックマークレットのまとめ
ウェブサイトの制作に役立つ便利なブックマークレットを紹介します。 ブラウザの機能拡張も便利ですが、入れすぎると重くなるのがイヤな人にぴったりです。 レスポンシブの確認はこれが一番便利 コードとアクセシビリティをチェック ページに柔軟なグリッドを表示 デザインの確認がピクセル単位でできる CSSの変更をリフレッシュ無しで確認 要素のスタイルを確認 CSSのセレクタを確認 ページで使用しているカラーを抽出 CSS3をサポートしていないブラウザでの見え方 ページの見出しを抽出 ページの構造が正しいか確認 ページをワイヤーフレーム化 コードをシンタックス化して読みやすく スマフォやタブレットでもコードが見たい レスポンシブの確認はこれが一番便利
[JS]エレメントをグリッド状にランダムに配置したり、Pinterest風に配置するスクリプト - BlocksIt.js
BlocksIt.jsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトをhead内に記述します。 ※jQueryは1.7.1で開発。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script> <script type="text/javascript" src="blocksit.js"></script> Step 2: HTML HTMLは対象となる範囲をラッパーで包み、各パネルを同列に配置します。 パネルはデフォルトでdiv要素を対象にしていますが、任意の要素で実装できます。 <div id="container"> <div>パネル</div> <div>パネル</div> <div>パネル</div
これはかなりの優れもの、スマートフォン・タブレット対応WordPressのテーマファイル -Skeleton
商用利用も無料、Responsive Web Designに対応したWordPressのテーマファイルを紹介します。 ボタン、タブ、パネルなどのページでよく使用するエレメントをはじめ、さまざまなカラムも簡単にショートコードで利用できます。 デモページを幅600pxで表示 Skeletonの主な特徴 Formalizeを使用して各ブラウザ間のエレメントの相違に対応。 Skeletonを使用してMedia Queriesを使った可変カラムに対応。 Option Frameworkを使用してテーマオプションのカスタマイズが可能。 bbPressのフォーラムスキンをインクルード。 見出しや本文などバランスの取れたタイポグラフィ。 デモ：Typography and Elements スマートフォン用のマルチレベルのメニューをサポート。 テーマオプションパネルからフォントや背景画像を設定可能。 タブ
スマートフォン、タブレット、デスクトップのためにレイアウトの幅をどのように設計すればよいか
iPhoneやAndroidなどのスマートフォン、「新しいiPad」などのタブレット、そしてデスクトップなど、さまざまなデバイスの幅に対応させるResponsive Web Designのために、どのようにレイアウトの幅を設計し、いくつレイアウトを用意するのか3つの方法を紹介します。 各デバイスの幅は、2012年3月のデータです。 A Simple Device Diagram for Responsive Design Planning [ad#ad-2] 下記は各ポイントを意訳したものです。 キャプチャに使用している画像は元記事よりPSDファイルでダウンロードできます。 各デバイスのサイズ レイアウトを3つ レイアウトを4つ レイアウトを6つ 各デバイスのサイズ まずは、2012年3月現在の各デバイスの幅です。 ※クリックで拡大 ポイント 上段：ポートレイト（縦置き）、下段：ランドスケ
ウェブデザイナーは知っておきたい、ページレイアウトの代表的な10のパターン
実際のウェブサイトを例に、ずっと廃れないであろうページレイアウトの10のパターンとその特徴を紹介します。 10 Evergreen Website Layouts (that will never go out of style) [ad#ad-2] 下記は各ポイントを意訳したものです。 2カラム、広いヘッダ 3カラム、広いヘッダ フォーボックス 不確定なグリッド 大きいスクリーンショット シングルカラム 打ち出し画像 固定サイドバー グリッドベースのギャラリー マガジンスタイル [ad#ad-2] 2カラム、広いヘッダ これは最も普通のレイアウトと言ってもよいでしょう。広いヘッダが上部にあり、960pxを2カラムにし、一つは広く、もう一つは狭くしたものです。狭い方はサイドバーでナビゲーションなどが設置してあります。 慣習的に、ブログでは広い方の右にナビゲーションを置き、スタティックなサイ
[JS]年表や社史など、アニメーションでスライドする時間軸コンテンツを簡単に実装できるスクリプト -Timelinr
jQuery Timelinr [ad#ad-2] Timelinrのデモ Timelinrの実装 Timelinrのデモ デモでは、水平レイアウト、垂直レイアウト、オートプレイの3種類があります。 スライドのアニメーションもかっこいいですが、パネル表示時のズームもいいですね。 デモ：オートプレイ [ad#ad-2] Timelinrの実装 HTML 時間とパネルをそれぞれリスト要素で実装し、divで内包します。 「#timele, #dates, #issues」はデフォルトの設定です。 <div id="timeline"> <ul id="dates"> <li><a href="#">date1</a></li> <li><a href="#">date2</a></li> </ul> <ul id="issues"> <li id="date1"> <p>Lorem ipsum.
Wookmark
高さの異なる要素をグリッドに沿って、レンガ状に隙間なく並べるjQueryのプラグインを紹介します。 同種の有名スクリプト「Masonry」はアニメーションを使ってダイナミックにレイアウトを変更しますが、このWookmarkはシンプルに並べなおすだけです。 デモ:幅800pxで表示 [ad#ad-2] Wookmarkの使い方 実装はいたってシンプルです。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.wookmark.js"></script> HTML デモを例にHTMLはリスト要素など、並列に配置しま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブのレイアウトやUIデザインの参考になるPinterestのボードのまとめ
これからのUIデザインのヒントになるDribbbleのアートワークのまとめ
2013年のウェブデザインのトレンドを探るかっこいいUIデザインのまとめ
ウェブデザインのセンスを磨く！ 2012年下半期洗練されたディテールのUIデザインのまとめ
ウェブデザインのセンスを学ぼう、2012年上半期洗練されたディテールのUIデザインのまとめ
レスポンシブWebデザインのサイト設計・実装・確認に役立つツールとリソースのまとめ
これが無料とは！ スマートフォン向けサイトやアプリのワイヤーフレームを作成するソフトウェア -Prototyper
ウェブ制作の時間を大幅に短縮する、今時のUIコンポーネントが簡単に実装できる -Chico UI