![ドイツのクリエイティブなウェブデザイン 55サイト | DesignWalker](https://cdn-ak-scissors.b.st-hatena.com/image/square/4ff1f0b6088f4085799229c562dcb3525e2a3b27/height=288;version=1;width=512/https%3A%2F%2Fg.twimg.com%2FTwitter_logo_blue.png)
ボクたちみたいな、ウェブサイトを閲覧するのが当たり前の人間からすると、全く気づかない事に気づかされたりしたので、自分用メモ。 2008年2月14日の22:47頃に追記 ボクのただのメモ書きをもうちょっとちゃんと以下のエントリーで書いてもらってるので、あわせてご覧になって頂くと、良いかと思います。 Webアクセシビリティについての覚書 - ねんがんのWebユーザビリティテストに参加した ロゴクリック=トップページに戻るという認識は殆ど無い。 トップページに戻る場合は、ブラウザの「戻る」ボタン。 サイドバーのバナーは、認知すらされない傾向が強い。 そもそもバナーとして押せるものではなく、デザイン上の飾りとして見られる場合も。 リストのマークとかのマーク部分をクリックしよーとする人が居る。 それにより、クリックできないと諦めるケースも。 プルダウン(ドロップダウン)型メニューは、近くのボタンを押
AJAXなどでよくあるあの「読み込み中……」みたいな感じのローディング中アニメーションをGIFアニメとして、好きな色の組み合わせでカスタマイスできるという便利なジェネレータです。現時点で99種類のパターンがあります。 詳細は以下の通り。 Load Info - gif generator http://loadinfo.net/ まずは好きなパターンをクリックして選択 小さなウインドウが開くので、色と背景色(透明も可能)、それから大きさを選んで「generate」をクリック しばらく待つと、完成するので「download」をクリックすれば保存できます。 なお、これが実際に作ったサンプルです。やっぱり背景色はちゃんと指定した方がいいかも。
クリエイティブ・コモンズ・ライセンスで公開されており、自由に使うことが可能なPSDファイルの詰め合わせパックです。Web2.0っぽいデザインからオリジナルのデザインまで、いろいろなサイト作成やパーツ作成に応用できそうなものが山ほど詰め込まれており、かなり使えます。 ダウンロードは以下から。 Deluxive Creative Pack 001 by *Deluxive on deviantART 中に含まれているのは以下の通り。 バッジ キューブ カーテン カレンダー グリッドフレーム いろいろな文字入れができるパーツなど イラストいろいろ ポラロイド風の枠 世界地図とかお天気とか 付箋紙 押しピン シェルフ たばこ 星形のバッジ ぺらっとめくれる感じのステッカー 木の板 なお、ほかにもPhotoshopで利用できるパターンや壁紙も入っています。
17日から下書き状態だったエントリー、、、沢山用意する予定だったけど色んな都合で増えない予感なんで公開。 ずいぶん昔にフッターの区切りっぽいサンプルを作ったけど、ヘッダーは作ってなかったので、ヘッダーのサンプルを作ってみましたよっと。 というか、ヘッダーのサンプルって見かけたことがほっとんど有りません。(必要とされてないから? ヘッダーって作るの大変というか、厄介だったりしませんかね。 全部画像ならがっちり固定しちゃえば、文字サイズ変更されても耐えられますけど、一部テキストがあったりした場合とかに文字サイズ変更するとレイアウト崩れてしまったりっていうアレが厄介だったりするのです。 文字サイズ変更しても崩れないようにする事を、DDTT対応っていうんでしたっけ。 今回のサンプルデザインは、一部弊社デザイナーにお願いしてつくってもらいました。 感謝感激でございまする。 デザイン提供してくれた方は
Elements of Designは、ブログなどのウェブサイトでよく使うエレメントのデザインを集めたサイトです。
Web Designer Wallにエントリーされている、テキストにグラデーション効果をつけるスタイルシートの紹介です。 CSS Gradient Text Effect 仕組みは、見出し要素(h1)に空のspanを記述し、グラデーションの背景画像を表示しています。 デモページでは、下記のようなさまざまなグラデーションをつけたテキストがあります。 CSS Gradient Text Effectのデモページ 利点としては、下記のような点が挙げられています。 テキストなので、ブラウザからのサイズの拡大・縮小が可能。 背景画像を変更することで、グラデーションを変更することが可能。 見出し画像をいちいち作成する必要がない。 数が多い場合、作成時間・帯域の節約になる。
R6K.Net Pressにエントリーされている「あなたが避けるべきウェブデザインの43のミス」の意訳です。 43 Web Design Mistakes You Should Avoid 上記エントリーによると、よく見かけるデザインのミスリストは10個くらいが通常ですが、それでは足らなく、増やしていくうちに43個になったそうです。 43の法則は、常識として浸透しているものもあれば、論争になるようなものもあります。 個人的には、いくつかは条件しだいでと思いますが、概ね相違無いです。 The user must know what the site is about in seconds. サイトに来訪したユーザーは、数秒で何のサイトか知らなくてはいけません。 Make the content scannable. コンテンツが一覧できるリストが必要です。 Do not use fancy
最近のページやサイト作成に欠かすことのできない「CSS(カスケーディング・スタイル・シート)」ですが、そのレイアウト作成を行う際に便利なリソース22種類です。ゼロから作るよりは楽に製作できるはず。 詳細は以下の通り。 40種類のCSSレイアウトがそろっています。 Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download! CSSのフレームワーク blueprintcss - Google Code 16種類の異なるCSSベースのレイアウト intensivstation :: CSS Templates :: Templates 12種類のCSSによるレイアウト Dynamic Drive CSS Layouts- CSS Frames CSSのレイアウトを作成する
noupeにエントリーされている、AJAXを使った素晴らしいCSSのフォームの47のサンプルの紹介です。
2007年12月6日追記 IE6で選択中のタブの上が切れていたのを修正しました。 具体的にはcss/style.cssの35行目にfloat: left;を追加しております。 いろんなサイトで見かける「よくある質問」。 一番多いパターンは、リストで質問があって、アンカーで回答に飛ばす方法だと思うです。 特別ソレがいけてないとかは思わないんですが、飛んだ後に「戻るボタン」で戻らない人とかは、毎回ページトップ押したり、スクロールして戻ったりと案外手間だったりするわけです。 それならそういった手間が掛かるかも知れないことを少しでも省けないかしら?って事で、jQueryを使ってタブ型で折りたたまれたよくある質問っぽいサンプルを作ってみました。 (単純にボクがこのスタイルが一番見やすくて好きってだけだったり) サンプルページ サンプルダウンロード(Zip:20KB) メインのCSSファイル (サンプ
Blog The Blog StarterVN:R_N [1.9.17_1161]Rating: 5.0/5 (1 vote cast) Portfolio Jenny JohannessonVN:F [1.9.17_1161]please wait...Rating: 3.6/5 (8 votes cast) Best of Adult Swim Singles 2016VN:F [1.9.17_1161]please wait...Rating: 4.1/5 (9 votes cast) Portfolio Alexandre RochetVN:F [1.9.17_1161]please wait...Rating: 3.8/5 (5 votes cast) CSS Converse: DiamondsVN:F [1.9.17_1161]please wait...Rating: 3.
User submitted list of design resources for web designers and developers.
(このイメージは、このブログの記事内容をイメージするもので、実在しません) 先日書店に、ホームページのデザイン集なるものがおいてあったので、買ってみた。 2000円出して買った本ですが、どうも損した気分に陥る。 そんな損した気分に陥る人が他にもいるかもしれないので、ホームページ、及びブログのデザインのインスピレーションをここにまとめておく事にします。 30ブログデザイン 最近話題になったエントリ。 30 More Excellent Blog Designs 良質なブログデザイン30サイトのまとめエントリ。 Simplicity and Whitespace(シンプルと空白のデザイン)からはこのブログデザインが好き。 すごくすっきりしているというのとさっぱりしていて、ちょっとクドイ。 Theocacao Weblogs Which Don’t Look Like Weblogs(ブログのよ
User Interface Design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced user interface designer. Product Insights at your fingertips. Our confidence-boosting product tools for business growth are practical guides and strategies that will immediately amplify the expertise of you and your team.
Free online web template generator プロレベルのWEBデザインをオンラインで簡単生成「doTemplate」。 doTemplateでは、基本となるテンプレートが12種類用意されており、「CUSTOMIZE」をクリックすることで自由にテンプレートをカスタマイズすることが出来ます。 カスタマイズを押すと、次のようなパネルが表示され、背景、コンテナ、タイトル、バナー、ナビゲーションなどの部分の色や各種サイズについてのCSSをカスタマイズすることが出来ます。 DOWNLOADボタンを押せばそのままテンプレートをダウンロードすることも可能。 ZIP形式でダウンロードでき、HTMLとCSS、画像が含まれたアーカイブを入手できます。 カッコよくデザインされたサイトを手軽に作るには非常に便利なツールですね。
ロイヤリティフリーで使える高品質アイコン集「Danish Royalty Free Icons」 2007年11月19日- Home I did some 32x32 px toolbar icons. I decided to release these free for developers and private individuals alike. SO use them in your apps, in your toolbar, on your website. ロイヤリティフリーで使える高品質アイコン集「Danish Royalty Free Icons」 次のような32x32のMacOSで使われているようなカッコいいアイコン集がロイヤリティフリーで使えます。 ICO, PNG, TIFF 等の形式で配布されています。 サイトに使えば、サイト全体が映えそうですね。Macなサイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く