ウィンドウサイズを変えるとコンテンツが再配置される可変グリッドレイアウトに関する情報まとめ
ウィンドウサイズを変えると コンテンツ（記事等）が再配置される 可変グリッドレイアウトに関する サンプルサイトやWPテーマ、 ライブラリなどの情報のまとめです。 詳しい方には参考にならないっぽいです。 いろいろ意見は分かれそうですが、知っておいて損は無いかなぁと思いますのでメモ。 可変グリッドレイアウトサイト可変グリッドレイアウトを使用したサイトの例。 D&DEPARTMENT PROJECT ECサイト。綺麗にまとまってます。MT使用。 D&DEPARTMENT PROJECT daily vitamins 暇つぶしが出来るサイト？どういう趣旨か分かりませんが、可変グリッド。WPです。 daily vitamins 小林聡美.jp 小林聡美さんのサイト。凄く見やすいです。MT使用。 小林聡美.jp Marunouchi.com 丸の内の情報サイト。ハイクオリティです。写真をダイナミックに
ECサイトをデザインする時の8つのポイント
2017年6月29日 Webサイト制作, Webデザイン プログラミングに詳しくなくてもECサイトを設置できちゃうCMSがたくさんあります。そんなCMSを紹介…しようと思ったのですが、かちびと.netにまとめ記事があったので、そのへんはシロ氏にお任せして、今回はECサイトのデザイン部分に焦点をあててみたいと思います。ECサイトではその商品やマーケティングが重要になってきますが、サイト全体のデザインを工夫してユーザーの購買意欲をより刺激しましょう！ ↑私が10年以上利用している会計ソフト！ 1. 商品のデザインと合わせる ECサイトのデザインは、その商品を知ることから始まります。例えば商品が服ならそのブランドのデザインコンセプトはもちろん、どんな人が、どんな場所で着るのか、素材やよく使われている色合いなどを研究してみてください。 Apple http://www.apple.com/jp/
キャズムを超えろ！ - 団塊～シニア層向けのWeb設計 やっちゃいけない10のＵＩ
一時期パソコン教室の講師をやっていたことによる経験と、昨今Webサービス運用にあたって中高年層からのクレームなどを自分なりにまとめた結果として、50代以上のユーザに対するWebサービス＆PCアプリケーションのUI設計における以下10のTIPSを公開してみたいと思う。...といってもたかだか10個で収まる簡単な話ではないので、思いついたら都度追加して行きたい。 ID，ニックネームを考えさせてはいけない。半角英字開始限定は論外 IDやニックネームが思いつかない方が多い。これはシニアに限らず、ITリテラシーがそれほど高くない若年層についても言えること。作る側の人間も「過去にWebで使ったID,Nicknameは全て使っちゃダメ。何か新しいのを考えて入れてみて。」と言われると結構悩んじゃうもの。それと同じ状態に陥ると思っていただけるとわかりやすい。「IDのかわりに電話番号でもいいですよ」というと結
伊藤内科医院
大分市大石町4丁目1組の2 / 097-543-1100 月・火・金: 8:30～11:45 / 13:30～16:45 水: 8:30～11:45 / 13:30～14：45 木・土: 8:30～11:45 / 午後休診 休診日: 日曜・祭日・木曜午後・土曜午後
【公式】ハイローオーストラリア｜新機能：ジャックポット・キャッシュバックプログラム￤HighLow.com
ジャックポットについて特別なキャッシュバック取引約定後に、幸運なプレイヤーは最大100,000円のキャッシュバックが当たります。また、Highlowロイヤルティ・ステータスが高いほど当選確率・金額が上昇します。
ランディングページ集めました。
2009年からランディングページを集めているサイトです。購買行動や認知拡大のために作られたランディングページのデザインまとめサイトです。LP制作の参考にどうぞ。
使えるユーザビリティーガイドライン10 – creamu
遅いエントリーですが、Smashing Magazineで使えるユーザビリティーガイドラインがまとまっています。 ざっとご紹介しますね。 1. フォームのラベルはフィールドの上がベスト study by UX Mattersによると、フォームのラベルはフィールドの上が理想的とのこと。多くのフォームで、ラベルはフィールドの左に置かれ、2カラムのレイアウトになっている。いいデザインだが、最も使いやすいレイアウトとは言えない。なぜなら、フォームは一般的に垂直方向に並んでおり、ユーザーは上から下に向かって入力していく。ユーザーは視線を下の方向に向けていくのだ。そのため、ラベルが左にあるよりも、同じ方向にある方が認識しやすい。 2. ユーザーの視線は人の顔に向く Webページを見るとき、人の顔や目に視線が行く。マーケッターにとっては、注目を集める有効なテクニック。ユーザーは画像の中の人の視線が向いて
IE 6で泣かないための、9つのCSSハック (1/3) - ＠IT
有限会社タグパンダ 喜安 亮介 2009/10/8 Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック＆フィルタTipsをお届けします（編集部） 最も多く使われているのに……、いや、だからこそ 多くのWebデザイナの悩みの1つは、レイアウトの表示ずれ問題だと思います。これは、各Webブラウザが採用しているレンダリングエンジンの違いから起因している場合が多いです。その中でも、最もWebデザイナ泣かせのWebブラウザなのは、マイクロソフトが開発しているIE（Internet Explore）のバージョン6です。 IE 6は、発売開始当初のWindows XPにデフォルトでインストールされていたWebブラウザということもあり、世の中の多くのユーザー
これはもう使用しない方がいいウェブデザインのトレンド
昔流行ったけど、これはもう使用しない方がいいものや人気がすたれているウェブデザインのトレンドをWeb Design Ledgerから紹介します。 Most Used and Abused Web Design Trends of All Time 以下、その意訳です。 過激な表現も一部あるので、留意ください。 はじめに 鏡面反射 アクア フラリッシュ コーヒーカップ 地球 コミックフォント ストックフォト ペーパー ポラロイド 特大のRSSアイコン 音の自動再生 カウンター マーキー ブラックの背景 スプラッシュページ スキップの無いイントロ ブラックの背景 はじめに トレンドは、ウェブデザインにおける良くないキーワードではありません。実際に、下記のリストのものはその時々でウェブデザイナーを鼓舞させました。これらのアイデアは影響が非常に大きくかったので、大量のクローンが作りだされました。
モバイルサイトのWebデザイン15選
携帯、モバイルサイトの デザインってどうなってるのか 少し興味が沸いたのでモバイル サイトのキャプチャを取って アーカイブとしてまとめている モバイルデザインアーカイブさん から15のモバイルサイトで好きな デザインを15個厳選しました。 個人的なギャラリーとなっていますが、共感して頂ければ幸いです。キャンペーンサイトのデザインなどもあるので現在は確認出来ない事もあります。 FAT ONLINE SHOPPING 余計な情報を入れず、一番伝えたい事は画像にしてTOP絵にしています。 FAT ONLINE SHOPPING AEON Lake Town シンプルですが、画面の小さいモバイルサイトで情報を絞り込むのはかなりいいのでは。Ｆｌａｓｈで操作も軽快でした。 AEON Lake Town MOS BURGER モスバーガーのモバイルサイト、凄くいいですね。メニューも見やすいし、色使いもか
タブUI詳解
タブUIの構造や特長、設置の判断、ユーザビリティ、アクセシビリティ、実装のポイントや機能の拡張方法、実装例やスクリプト例をSmashing Magazineから紹介します。 Module Tabs in Web Design 以下、その意訳です。 ※原文では「タブモジュール」となっていますが、タブモジュールやタブUIと記載すると煩雑になるため、「タブ」と略します。 タブのみを指す場合は、「タブ コントロール」としています。 はじめに 1. タブの構造 2. タブはいつ使用するのか 3. タブのユーザビリティとベストプラクティス 4. タブのアクセシビリティ 5. タブの拡張 6. タブの実装集 7. タブを実装するためのチュートリアル集 8. タブを実装するスクリプト集 はじめに タブモジュールは複数のコンテンツを異なるパネルに配置したユーザインターフェースのデザインパターンです。 パネル
セマンティックで使いやすいフォームを制作するための習作
ビギナーのためのセマンティックでアクセシブルで機能性にも優れたフォームを制作するための習作Nettuts+から紹介します。 20+ HTML Forms Best Practices for Beginners 下記は、その意訳です。 1ステップずつフォームを改善し、アクセシブルで機能性をアップするポイントを紹介します。 セマンティック アクセシビリティ ファンクショナリティ デザイン 結論 セマンティック 1. fieldsetを使用 ユーザーが入力する多くのフィールドがある際、fieldset要素を使用して類似情報をまとめます。 <textarea name="code" class="html" cols="60" rows="5"> <fieldset> <span>Billing Address</span><input type="text" /> <span>City</sp
Webデザイナーのための美しいjQueryプラグイン22 – creamu
Tutorial9で、Webデザイナーのための美しいjQueryプラグインが紹介されています。 ざっといくつかご紹介。 » jQuery.popeye – an inline lightbox alternative lightboxをギャラリーのようなインターフェースに代替したjQuery.popeye » jPlayer – jQuery mp3 player plugin jQueryで作るmp3ミュージックプレーヤー » jQuery form plugin jQueryで非同期通信のフォームを実装 » easyDrag jQuery plugin 簡単にコンテンツをドラッグ&ドロップできるようにするプラグイン » jQuery accordion plugin – vertical 垂直方向のアコーディオンメニュー » Switch stylesheets with jQuery
CSSの実装状況で変わるボックスのデザイン方法
Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。 いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない１つの古文書に従えばいいので、きっと活躍できます。 しかしたまらん、流石に疲れた。 ボックスひとつができること CSSでは、文書を構成する各要素は、ボックスという矩形領域に置きかえられ、それらの持つプロパティを操作して装飾します。つまり、ボックスはページデザインを構成する最小単位と言えるわけですね。 そこで今回は、最小単位となる1つのボックスに対して、どのような装飾手法が有効かという点を、CS
ロングライフデザイン | D&DEPARTMENT
ひとつで8役、無水鍋。 FROM LIFE STOCK 祇園ない藤「JOJO」POP UP STORE in FUKUOKA
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
japan.internet.com Webビジネス - 売れないオンラインショップの条件
パスワード認証
http://www.designwalker.com/2009/11/html5.html
http://www.sanei-art.jp/
マウスオーバーをデザインする | DesignWalker
