みんなで作るWEBデザイン参考集「ブックマ！」感性を刺激するWebデザインギャラリー＜bookma!＞
ウェブデザインで大切な空白スペースの効果的な5つの使い方
空白スペース（ホワイトスペース）が、ウェブサイトのユーザエクスペリエンスに与える5つの重要な効果を紹介します。 5 Ways How Whitespace Affects The User Experience 下記は各ポイントを意訳したものです。 はじめに：空白スペースの基礎知識 1. 空白スペースがデザインに使いやすさを加える 2. 空白スペースがコンテンツに読みやすさを加える 3. 空白スペースがビジターに休憩を与える 4. 空白スペースがデザインをモダンに見せる 5. 空白スペースがあなたのデザインに感動を与える はじめに：空白スペースの基礎知識 空白スペース（ホワイトスペース）は、ウェブデザインにおいて非常に人気の高いデザイン要素です。この空白スペースは元々は印刷デザインからのもので、「テキストとグラフィックの欠如」を現します。と同時に空白スペースは「空きスペース」以上の役割を果
配色パターンを決める際にお世話になっているサイトをご紹介
「なんかいつも同じような配色になってしまう」「思い切った配色ができない」と悩んだときに個人的にお世話になっているサイトを紹介します。 かなり有名なサイトばかりですが参考になればうれしいです。 メインの色を決めるたいときに まず、ウェブサイトのメインとなる色を決めるときに使っているサイトを紹介します。 WEB色見本 原色大辞典 - HTML Color Names この手のサイトは色々ありますが、私はこのサイト一筋です。様々な色が載っていますが、以下のページの色を参考にすることが多いです。 日本の伝統色 和色大辞典 - Traditional Japanese Color Names 世界の伝統色 洋色大辞典 - Traditional World Color Names ビビッドカラー - Vivid Colors カラーピッカーもよく使います。 カラーピッカー - 原色大辞典 アクセント
jQueryのanimateを使ったアニメーション
今回はjQueryのanimateを使って、要素をアニメーションさせる方法を試してみようと思います。 本当はCSSのアニメーションだけで済めば良いのですが、特にIEを考えると難しいところです。そこでjQueryを使っての基本的な方法をおさらいしておきたいと思います。 書き方 まずanimateの書き方ですが、このような感じ。 animate(params, [duration], [easing], [complete]); animate(params, options); 2通りありどちらの書き方でも動きます。 1つめの書き方はそれぞれ引数を指定する方法で、2つめは連想配列で指定できるようになっています。今回は2つ目の連想配列の方法で説明していきます。 params ここには、アニメーションさせたいスタイルを書きます。 $('#btn01').click(function(){ $('
ディレクター向け、2013年ウェブデザインのトレンドのまとめ
フラット、サークル、ブラック、ブラー、写真・動画の背景、などビジュアル的なトレンドではなく、どちらかと言えば全体を包括するディレクター向けのウェブデザインのトレンドを紹介します。 コンテンツはウェブにとって非常に重要です。今後数ヵ月にわたり、コンテンツをどのようにユーザーに提供するのがよいか、スマフォ・タブレット・デスクトップなどのさまざまなデバイスにどのように適合するのがよいか、さまざまな討論がおこるでしょう。いずれにしても、これは非常に関心の高いことです。 効率的で、検索可能で、アクセシブルで、マルチプラットフォームに対応したコンテンツを作成し、最も良いインタラクションを備えてユーザーに届ける必要があります。 2. デザインとコンテンツのシンプリシティ シンプリシティは新しい方法論です。シンプリシティとは、コンテンツをアクセシブルで読みやすく、最も良いユーザエクスペリエンスを提供するも
Webデザイナーなら押さえておきたい、今月の優れたWebデザイン（2013年1月）
SilkTricky / WOW / Form Follows Function他...全14件
まるでおとぎ話の世界みたい!かわいくてガーリーな21サイトをご紹介
こんにちは。可愛いサイト大好き。 可愛い女の子はもっと好きな井畑です。 そんな井畑ですが、 ブックマークしていたお気に入りの可愛いサイトが増えてきたので、 今回ここでご紹介したいと思います。 僕の個人的な趣味が含まれますので、 「こんなのガーリーでもなんでもねーよｗｗ」とか、 twitterやはてぶで話題になったもので、既に知ってるものなども多くあるかと思いますが、ご了承くださいませ。 それではどうぞー!! Peter Granfors Peter Granfors まずは海外のサイトをご紹介していきます。 フィンランドのグラフィックデザイナーさんのポートフォリオサイト。 クリーム色のベースにピンク･ブラウン･紫のテクスチャーとイラストが繊細でとても可愛いサイトです。動物のモチーフも印象的で、タイトル部分のフラミンゴは勿論、フッターのお猿さんにも注目です。 me & oli me & ol
クオリティが高い縦に長いサイトを厳選して集めています MUUUUU_CHANG WEB DESIGN SHOWCASE
縦長のwebデザインをがむしゃらに集めています。
ウェブデザイナーは知っておきたい、ページレイアウトの代表的な10のパターン
実際のウェブサイトを例に、ずっと廃れないであろうページレイアウトの10のパターンとその特徴を紹介します。 10 Evergreen Website Layouts (that will never go out of style) [ad#ad-2] 下記は各ポイントを意訳したものです。 2カラム、広いヘッダ 3カラム、広いヘッダ フォーボックス 不確定なグリッド 大きいスクリーンショット シングルカラム 打ち出し画像 固定サイドバー グリッドベースのギャラリー マガジンスタイル [ad#ad-2] 2カラム、広いヘッダ これは最も普通のレイアウトと言ってもよいでしょう。広いヘッダが上部にあり、960pxを2カラムにし、一つは広く、もう一つは狭くしたものです。狭い方はサイドバーでナビゲーションなどが設置してあります。 慣習的に、ブログでは広い方の右にナビゲーションを置き、スタティックなサイ
国内のiPhoneアプリでデザインが参考になったWebサイトいろいろ - かちびと.net
以前からちょいちょいブックマーク していたんですが、いつの間にか増 えてたので一覧化してみたいと思い ます。国内のiPhoneアプリサイトで Webデザインが参考になったサイトの まとめ。あんまり無いですが・・ 個人的な備忘録とメモ書きです。探し方も悪いと思いますので数はさほど網羅していません。「あそこ凄い素敵なのに載ってない」みたいなご意見ありましたらコメント欄にてご教授頂けますと幸いです。 この記事で見たいのはアプリではありませんのでWebサイトへのリンクしかありません。順不同となっています。シェア系アプリが多いです。 MogSnap 食べたものを写真で評価、共有するiPhoneアプリ。写真系なのでこういったスライドがあるとアプリの概要をイメージしやすいですね。無料であること、キャプチャ、アプリダウンロードのボタンが分かりやすく明示されています。 MogSnap 大辞林 言わずと知れた
効果的なミニマルデザインと退屈なデザインの境界線
効果的なミニマルデザインと退屈なデザインの境界線ミニマルデザインを考えるときによく使われる言葉「Less is more（少ない事は効果的だ）」。装飾が多すぎるとどれも目立たなくなる、無駄を削ぎ落した方がより美しく効果的であるという考えです。これに対し「Less is bore（少ない事は退屈だ）」という皮肉な言葉もあったりします。美しいミニマルデザインと退屈な間抜けデザインは紙一重。その違いを考えてみましょう。 ミニマルデザインとはそもそもミニマルデザインとはなんなんでしょう？Wikipediaを見ると ミニマル・デザイン（Minimal Design）は、あまり使用しない機能のせいでシステムが肥大化することを避け、必要最小限の機能に絞って設計することをいう。 とあります。冒頭でも書いたとおり、要素が多すぎると結局なにが主張したいのかわからないデザインになってしまいます。それを避けるため
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Tumblrで作られたスゴいWebサイト
cmmntr.com
Web制作者が読んでおきたい、最近公開されたおすすめのスライド
Webデザイナーが読んでおきたい、最近公開されたWeb系のスライド
新着記事
S5-Style
ナビゲーションメニューのデザイン総まとめ - DesignWalker
