ブラウザの解像度別に、ファーストビューでどう見られているかを知りたい。 そんなときに便利なのが、『Where is the fold?』。above-the-foldのラインを示してくれるサイトです。 URLを入力してボタンを押すと、以下のように解像度別のラインを表示してくれます。 なかなか面白いので、一度試してみてください。 Where is the fold? 結構早めに起きられたのでいろいろ進めます。
above-the-foldのラインを示してくれるサイト – creamu
ブラウザの解像度別に、ファーストビューでどう見られているかを知りたい。 そんなときに便利なのが、『Where is the fold?』。above-the-foldのラインを示してくれるサイトです。 URLを入力してボタンを押すと、以下のように解像度別のラインを表示してくれます。 なかなか面白いので、一度試してみてください。 Where is the fold? 結構早めに起きられたのでいろいろ進めます。
20 Free Social Media Icon Sets For a More Shareable Website
If your blog needs a face lift, the creative types who power the web are here to help. Sometimes a few well-designed, tastefully placed icons can add a little class or creativity to an otherwise neutral theme. Social media links, which we'd argue are a priority for any blog, are a great opportunity to add some texture. You could always roll with the standard-issue glossy, rounded-edge fare, but fo
Web制作時に色（カラー選定）で困った際に役立ちそうな13のツールやサービス - かちびと.net
Webサイトの制作時にいつも 時間がかかるのがカラー選定 で、少し困っているのでもう少し 時間を短縮したいと思い、使って いるツールも含めていろいろご紹介。 いろいろ有りすぎるので使いやすいと思ったサービスに厳選しています。順不同。使いやすさとか好みもあると思うので参考程度に。。。ネタ帳さんのwebサイト作成時にサイトカラーを決められない人の為のwebサービスいくつかという記事も凄く参考になりますよ。 原色大辞典 色のリファレンス国内サイト。国内にも同じようなサイトは沢山ありますが個人的にここが一番見やすくて使いやすいです。 原色大辞典 colr.org 写真からスキームを作成してくれます。手持ちの画像をアップロードしてスキーム作成も可能ですが、flickrからランダムで呼び出したり、ピッカー機能があったり、タグ付け出来たりと多機能ですが、UIがシンプルで使いやすい。動作も軽いので重宝しま
今さら聞けないWeb（制作現場に出てくる）用語集 第4回 Web デザインアプリ編 | バシャログ。
「坂の上の雲」が面白かったです、toyama です。 はい、今さら聞けないWeb（制作現場に出てくる）用語集、連載 4 回目の今回は「Web デザインアプリ編」としまして、画面デザインや画像制作にかかわる用語をピックアップしたいと思います。 単語だけでは辞書見ればわかってしまうので、実際シーブレインでどんな会話に登場するかの使用例を含めてお届けしたいと思います。 カーニング（トラッキング） 文字と文字の間のスキマを奇麗に整えること。文字詰めともいいます。 タイトルやボタンに文字を使う場合には特に気をつけたいです。 段落全体に行うことをトラッキングといいます。 使用例）この見出しんとこカーニング甘いよ。 カーニング - 意味・説明・解説 :ASCII.jpデジタル用語辞典 カンプ Webデザインでは Composite の略、広告デザインではComprehensive の略（だそうです）。
これは一見の価値ありな、1ページのJSサイト集:phpspot開発日誌
25 Creative Single Page Websites With Awesome JavaScript Effects 一見の価値ありな、1ページのJSサイト集がまとまってます。 1ページとはいえ、JSでページを1ページ内でスクロールするのでコンテンツは複数ページと同等です。 アイデアが秀逸なものが多くて感心するものが多いです MelissaHie ページがパネル風に分かれていて、ページ全体がダイナミックに移動するサイト DanteStyle 横にズラッとページが配置されていてアニメーションで切り替わる Webleeddesign ページが縦にスクロールされるのですが、そのアニメーションがなかなか秀逸です。 Howarths ページをめくる風のUIが実現されてます。 他にも色々あるので真似してみるのもよさそうですね。
黒を活かしたWEBデザインのインスピレーション集「50 Examples of Black in Web Design – Black is Beautiful!」
黒を活かしたWEBデザインのインスピレーション集「50 Examples of Black in Web Design – Black is Beautiful!」 WEBデザインの印象を決定づける要素は様々ですが、もっとも大きな要素の一つ色。ベースカラーを何にするかで大きく印象がことなります。今日紹介するのは黒のペースカラーを使って素晴らしいデザインにまとめているWEBサイトを集めた、黒を活かしたWEBデザインのインスピレーション集「50 Examples of Black in Web Design – Black is Beautiful!」です。 Jonah Levine 色の中でもかなり印象深く、強い色だけに、きれいにまとめるとインパクトがあり、シャープな印象を受けます。様々なWEBサイトがまとめられていますが、今日はその中から幾つか気になったものをピックアップして紹介したいと思
ドロップダウンメニューのデザインネタ帳:phpspot開発日誌
17 Effective Dropdown Menu resources | Underworld Magazines NYC | ドロップダウンメニューのデザインネタがまとまってます。 ソースを見ることもできるので、ドロップダウンメニュー実装の際に参考にされてみてはどうでしょうか。 ドロップダウンといっても様々なデザインのアプローチがありますね。 関連エントリ CSS3を使ったMacライクでクールなドロップダウンメニュー「CSS3 Dropdown Menu」 複数選択が可能でスタイリッシュなドロップダウンメニュー実装用「jQuery MultiSelect Plugin」 クールにアニメーションする水平ドロップダウンメニュー実装jQueryライブラリ
グラデーションを使用しないでウェブデザインをする方法
なんとなくグラデーションを使用したり、困ったらグラデーションを使用したり、トレンドだからグラデーションを使用したりしていませんか？ グラデーションを使用しないでデザインする方法をBuild Internet!から紹介します。また、グラデーションをより効果的に必然として使用するためのエントリーでもあります。 多くのウェブデザインのブログで周期的にページデザインのPhotoshopのチュートリアルを紹介しています。これらは素晴らしいウェブページを作成するためにグラデーションベースのデザインが一般的であるというおかしな印象を与えてしまいました。こういった記事を書く我々は間違って解釈されてしまう記事を書いたという罪があります。 ウェブデザインはデザイントレンドがどれだけ含まれているかのチェックリストではありません。何を使用するにしても、何をやめて何をアレンジするか学ぶ必要があります。 WeFunc
色の組み合わせでもう迷わないためのカラーセオリー | ライフハッカー・ジャパン
Webデザインでも企画書でも、色使いや色選びというのはなかなか悩ましいものです。デザインブログ「Before & After」に、デザインのプロでなくても上手な色選びができる、PDFのカラーセオリーのパンフレットがありました。 そのパンフレットによると、色相、濃淡、カラーパレットに関して少しでも知識があると、色の組み合わせがグッと良くなるということです。写真周辺に持ってくる色を上手くコーディネートするには、ちょっとした芸術的＆科学的センスと、ちょっとした色に関する知識があれば十分。全25ページのパンフレットを読めば、なんと完璧な色選びができるようになるそうです。 パンフレットの中では、まず写真のデジタルデータから自然なカラーパレットを作成する方法が載っています。そのカラーパレットの中から、ポイントとなる色を選び、寒色系や暖色系、トーンや色相などを揃えながら、自分好みに組み合わせていきます。
無駄な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のフレームワ
デザインの基礎知識として覚えておきたい「バランスの良い縦横比」｜blogs.com
はてブ twitter delicious livedoor クリップ Tumblr Instapaper メールで送信 デザイン・アート 2010.01.14 0 山田井 ユウキ 今回ご紹介するのは「Love & Design」から、「覚えておくと便利なバランスのよい縦横比とバナーサイズ」という記事です。 別にウェブに限らず、TVの画面や名刺などデザイン的に「見やすい」とされる比率は日常生活のあらゆる場面で使われていますので、覚えておいて損はないと思いますよ。 記事によると、バランスの良い比率とは次の通り。 1 : 1.4 日本建築やハガキ・用紙サイズに用いられる白銀比 1 : 1.6（または5：8） 名刺などに用いられる「最も美しい比」とされる黄金比 3 : 2 フィルムカメラで使われる伝統的な縦横比 4 : 3 PC のディスプレイやアナログテレビの縦横比 16 : 9 デ
ウェブデザインでこれは気をつけたいの35のポイント
ウェブサイトやブログの作成・運営で、避けておきたい35個のミスをnetjellyから紹介します。 List of Web Design Mistakes You Should Avoid 下記は、各リストを意訳したものです。 ※訳者注： 一部過激なものは表現を少し和らげています。 はじめに ウェブサイトやブログを開発・作成する際に、避けた方がよいミスをリストアップしました。 1. 作るだけでは終わりではない ウェブサイトは開発・作成だけでは終わりではなく、公開・運営する必要があります。そして、オンラインやオフラインでウェブサイトの告知に手間や時間をかけることはいっそう必要になります。もし、あなた自身があなたのサイトについて時間をかけないなら、他の誰もそれはしないでしょう。 2. 広告をコンテンツに混ぜない 広告をコンテンツに混ぜると、短期的にはクリック数を増やすかもしれません。しかし、ユー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
IDEA * IDEA
HTML5とCSS3を使用した、ハイクオリティな無料のテンプレート集
IDEA * IDEA
ウェブデザイナーにおすすめ Google Chromeエクステンションいろいろ | DesignWalker
ブラウザ上で最新のCSSをインタラクティブに試せる『CSSDesk』 | 100SHIKI
色の変化を見つめることが出来る「0tp255」 - WWW PARTY
画像のレイアウトに困ったら「Dummy Image Generator」 | ライフハッカー・ジャパン