グリッドレイアウトを意識したレスポンシブWebデザインをSass/Compassを使って構築する為のサンプル - かちびと.net
なかなか珍しかったので備忘録。個人的 にも注目しているMedia Queryを使った レスポンシブWebデザインの構築を、 Sassをサポートしたcssフレームワーク、 Compassを使って行える、というサンプル。 完成度も高めなサンプルなのでCompassを使用しなくてもちょっとソースに目を通しておくといいかもですよ。modernizrを使用してIEにも対応させています。CompassはMoongiftさんの記事をご参照ください。css書くのがちょっと楽になる的なやつです。 Responsive Web Design Using Compass サンプルです。HTML5で構築。既にMedia Queryを使ったレスポンシブWebデザイン設計は整のえてあります。 では表示を、先日超おすすめしたResponsivepxで確認します。 320px幅 320ｐｘ。iPhone等はこの表示になり
[CSS]高さが可変のボックスに二重のボーダーを適用するテクニックのまとめ
デモページ：ボックスの高さを拡張 以下は、これらの5つの実装方法と解説を意訳したものです。 Method 1: borderとoutline Method 2: 疑似要素 Method 3: box-shadow Method 4: div要素の追加 Method 5: border-image [ad#ad-2] Method 1: borderとoutline borderプロパティとoutlineプロパティを併用します。 この方法はoutlineプロパティをサポートするブラウザだけうまくいきます、つまりIE6/7以外です。 .one { border: solid 6px #fff; outline: solid 6px #888; } この方法が機能するのは、outlineがボックスの外に配置されるためです。outlineを使用する際の問題点は、周りのエレメントに影響を与えないとい
企業や会社ブログでより魅力的なコンテンツを提供するための42のアイデア
企業や会社のブログ運営時に行き詰まった時などに参考にしたい、新鮮で魅力的なコンテンツを提供するための42のアイデアを紹介します。 41 Awesome Blog Post Ideas for Your Company Blog [ad#ad-2] 下記はebook「100 Content Ideas for Community Managers（コミュニティマネージャーのための100のコンテンツのアイデア）」から抜粋されたものを意訳したものです。 ※元記事のタイトルは41となってますが、36がダブりなので42にしました。 マルチメディアとビジュアル プロダクトのスクリーンキャストをScreenrで作成し、ブログで共有します。 スクリーンキャストでステップごとのガイドやハウツーのビデオなどを見せます。 会社用のイメージビデオを作成し、ブログに掲載します。 オリジナルのマンガのキャラクターを作
スマフォとかミニマルデザインに特化した、これからお世話になりそうなWebデザインギャラリー - かちびと.net
Warning: Undefined array key "width" in /home/youhei0828/kachibito.net/public_html/wp-includes/media.php on line 1681 Warning: Undefined array key "height" in /home/youhei0828/kachibito.net/public_html/wp-includes/media.php on line 1682 自分の中で課題があって、その為に 必要なインスピレーションを得るため のギャラリーサイトをまとめます。いち いちブックマークから探すのが面倒に なってきたのでちょっと整理がてら記事 にします。 というわけで個人的なリンク集です。スマフォとかミニマルデザインとかのWebデザインギャラリーいろいろ。デザインギャラリーですけど、目
カラー別、デザインが素晴らしいウェブサイトのまとめ
カラー別にデザインが素晴らしいウェブサイトのまとめを紹介します。 Web Design: Nice and Clean Layouts ホワイトをベースにしたウェブデザインのまとめ キャプチャ：Stu
エラーページもグラフィカルに表現「30 Interesting 404 Pages」
webページが表示されない時に変わりに画面に登場する「404 error」。文字だけの味気ないタイプのものが一般的ですが、今回は「404 error」をグラフィカルに表現したwebデザインページ集「30 Interesting 404 Pages」を紹介したいと思います。 （Error | Brandstack） 一目見たら忘れられない、個性的なデザインの「404 error」ページが多数紹介されています。気になったデザインをいくつかピックアップしてみましたので、下記よりご覧ください。 詳しくは以下 ■Dailymotion Cloud – Page not found 雲のイラストが広がるバックグラウンドと、サイン風にデザインされた「404 page not found」が目を惹く、シンプルでありながらもインパクトのある作品です。 ■Nothing found for 404notfo
効果的なランディングページを制作できるテンプレート集「50 Effective Landing Page Templates for your Products」
効果的なランディングページを制作できるテンプレート集「50 Effective Landing Page Templates for your Products」 インターネット上に広告を掲載する場合、広告から商品に直接結びつくページへの誘導が、ユーザーがサイトに留まってくれる重要な要素だと思います。そこで今回紹介するのが、ユーザーに分かりやすいランディングページを手軽に制作できるテンプレートを集めた「50 Effective Landing Page Templates for your Products」です。 Marketing – Promo – Landing Page for Digital Product Sales – ThemeForest 商品の詳細をチェックしたらすぐに購入できるように設計された、さまざまなテンプレートが紹介されています。中でも特に気になったテンプレー
webデザインで使いやすいPhotoshopパーツ集「55 Brilliant Free Pixel Perfect PSDs」
TOP > Design > webデザインで使いやすいPhotoshopパーツ集「55 Brilliant Free Pixel Perfect PSDs」 webサイト制作に欠かせないボタンなどのUI素材。フリーで利用できるパーツ素材が多数発表されており、活用しているという方も多いと思います。そんな中今回紹介するのは、デザイン性が高く利用しやすいPhotoshop素材を集めた「55 Brilliant Free Pixel Perfect PSDs」です。 （tutegate™ | Motion graphics and design blog » Neat sliders） ボタンセットからアイコンまで、さまざまな素材が紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■Login Form PSD | elemis |
クリエイティブな４０４ページいろいろ３０種:phpspot開発日誌
30 Creative 404 Error Pages | Flash User クリエイティブな４０４ページいろいろ３０種。 ４０４ページといえばあまりみられることのないページです。ただ、そんなあまり見られないページが作りこまれていると、頑張って作っているなぁと思ってもらえたり、よく考えられているなぁという風に観ている人に感心してもらえることがあるのかも。クリエイティブな部分をインプットしておくことでいざ作るときにはいいものを作るヒントにすることができそう。 見ているだけでも楽しい、というかデザイナーさんの遊び心はいつも感動させてくれます 関連エントリ 移動する前に404かどうか確認できるjQueryプラグイン「Catch404」 アイデア満載の404サイトデザイン例30
実例から学ぶ、固定表示されるナビゲーションを賢く使うポイント | コリス
Netontwerp 正方形のグリッドが特徴的なウェブサイトで、ナビゲーションは真ん中に配置されています。サイトは1ページで構成されており、ナビゲーションのラベルをクリックするとスライドのアニメーションでコンテンツが表示されます。 ナビゲーションは各コンテンツに溶け込むようにデザインされており、こういった使い方は小さいサイトには素晴らしいソリューションとなるでしょう。 Black Estate Vineyard このサイトも1ページで構成されたもので、半透明な背景を使用したナビゲーションが配置されています。各コンテンツは半透明のナビゲーションの後ろにスクロール表示され、ユーザーは迷うことがないでしょう。 半透明の背景を使用する一番の利点は、さまざまなビューポートのサイズでも不具合が生じないことです。
サムネイルの使い方がうまいサイト２５:phpspot開発日誌
25 Examples of Thumbnail Usage in Web Design | Codrops サムネイルの使い方がうまいサイト２５ ギャラリーサイトや企業のプロダクトを紹介する場合などにサムネイルを並べたりすることがあると思いますが、こういう場合に、あまりサムネイルの並べ方について考えたことがない場合は単純にサムネイルを並べて、可もなく不可もなくなデザインになってしまいそうです。 サムネイルの使い方がうまいこうしたサイトを予めみておくことで、ああこういう使い方があるのか、というインプットになって実際のアウトプットの際に役立つかもしれません。 サムネイルだけでなく、色々なパーツデザインがありますが、それぞれの色々なデザインを把握してその場その場に応じたインタフェースを提案できるデザイナーさんがいたとしたら本当にプロフェッショナルと感じますし是非一緒に仕事がしたいと思われること
最近リリースされたWEBデザイン用PSDデータ５種:phpspot開発日誌
5 Best Free PSD Templates Of Month May 2011 最近リリースされたWEBデザイン用PSDデータ５種がまとまっています。 こうしたWebデザインのPSDは過去より存在しますが、最近リリースされたこともあって、より最近のデザインに近いものですね WEBデザインのデザイン方法にもトレンドみたいなものがあるみたいですが、数年後のトレンドはどんな感じになっているんでしょうね。 関連エントリ シンプルで汎用に使えるWEBレイアウトのPSDソース「Blackbeard template」 かなりクールなPhotoshop用フリーUIキット-PSDファイル50個 色々使えそうなフリーのPSD素材ファイル３０ 覚えておくと便利そうなWEBデザイナー向けハイクオリティPhotoshop素材１５
ウェブデザインをワンランクアップさせるデザインテクニック『奥行き』の使い方
あなたのウェブデザインをワンランクアップさせる『奥行き』を使いこなすための5つのデザインテクニックを紹介します。 Creating Depth in Web Design: 5 Design Tricks [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに リアリスティックなインターフェイス ラッピングとリボン 遠近法 オーバーラッピング シャドウ おわりに はじめに デザインに『奥行き』を与えると、ウェブサイトをユニークにし、ビジターに忘れがたい印象を与えることができます。それが抽象的な方法なものであっても、奥行きがリアリズムを与えます。グラフィックデザイン、ロゴ、ウェブデザインなどこういった付加的なリアリズムはあらゆるデザインにおいて、興味を引き起こすことができます。 また、奥行きを使うことで、特定のエレメントの強調をしたり、情報の正しい階層を作ることも可能です。フラッ
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re
iPhoneアプリやアプリ連動サイトを作る際に超参考になるサイトデザイン色々:phpspot開発日誌
30 Beautiful iPhone Application Websites - Web Design Blog ? DesignM.ag iPhoneアプリやアプリ連動サイトを作る際に超参考になるサイトデザイン色々。 アプリ連動であればそれとわかるように、でかでかとiPhoneの画面にキャプチャを出したりするのがよさそうですが、そういうデザインが沢山まとまったエントリのご紹介です。 どれもハイクオリティなデザインで非常に参考になると思います。 どれもうまい具合にiPhoneを当てはめてるところが巧みです。 アプリがメインならアプリを目立たせるようなデザインにしたほうがいいのかもとちょっと思いました。 関連エントリ スマフォサイト作りの前に知っておくべきデザインギャラリー等リソースまとめ スライダーを上手く使ってデザインされたWEBサイト集３０ デザインそのままにfacebookのウォ
tumblrで画像収集するのに向いてそうな、無料のテーマ・51個まとめ（と、少しだけ特徴をメモ - かちびと.net
tumblrで画像収集するのは割と当たり前 ですが、後で見返すときに見にくいテーマ だと見る気がしないのでいろいろ試して いましたが、せっかく試したのでついでに 画像収集に向いてそうなtumblrのフリー のテーマをご紹介します。 というか変えたい時に探してるんですけど、いちいち面倒なのでメモしたいんですが、せっかくなのでここにリンク集作ってシェアしようかなと思った次第です。 簡単ではありますが、特徴をメモ書きしています。Lightboxが付いてるとか、自動で次のページを読み込むとかリキッドレイアウトとか。 全てをちゃんと確認したわけではないので、参考程度に。順不同、全部で51個ありました。 キャプチャはテスト用で作ったものです 全部無料です 環境次第でカラム数が変わるものもあります 長くなってしまって見る気がしないので1カラムは省いています。 Themanati 3カラムのリキッドレイア
デザインのポイントに活用できる「33 Brand New Icon Tutorials with Freebie Sets」
デザインのポイントとして活用できるアイコンですが、いざ一から作成しようと思うと大変なもの。そこで今回は、そんな時に役立つアイコンチュートリアル＆フリーアイコンセット「33 Brand New Icon Tutorials with Freebie Sets」を紹介したいと思います。 （Create a Chalkboard Icon Using Photoshop and IconBuilder – Screencast | Psdtuts+） さまざまな種類のアイコン作成の過程が分かりやすく紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■Create a Detailed Vintage Television Icon in Photoshop | Psdtuts+ レトロなデザインのテレビを描くことができるチュートリアル
Webデザインにおける、1pxへのこだわり
☆ご注意☆ この記事は 2011年6月5日 に書いたものです。情報が古い可能性がありますのでご注意ください。 私も少しですがこの「1pxのこだわり」を日頃のデザインで使えるようになってきたので、制作方法とともにちょっとまとめてみました。 引き出しのひとつとして、デザイン勉強中の方、参考にしてもらえるとうれしいです＾＾ デザイン上級者の方々にとっては当然のことだと思うのですが、 最近つくづく思うのが、「1pxで質感が全然変わるよなぁ～」ってとても感じます。 たった1pxでピリッとしまったり、見やすくなったり、しゅっとなったり、、、と、1pxをないがしろにしちゃいけないんですねー… 今回は、私がデザイン制作時よく参考にしている、 デザイン参考集、bookma!さんの中から、色んなサイトを調べてみました。 目次 仕切り線の1px 文字をキリッと見せるための1px 動きのある1px 1pxの枠 仕
スライダーを上手く使ってデザインされたWEBサイト集３０:phpspot開発日誌
30 Websites Using JavaScript Sliders | Vandelay Design Blog スライダーを上手く使ってデザインされたWEBサイト集３０ ページ上段に大きく画像を使ってデザインされたWEBデザイン集です。 同じようなサイトを作る際の参考資料となりそうだったのでご紹介です。 それぞれデザイナーの方が趣向を凝らしたデザインはどれも勉強になると思います 関連エントリ 奥行きをうまく使ったサイトデザイン集３０ 次のサービスに使えるかもしれないロゴデザイン集２２ 自然を取り入れた美しいWEBデザイン集
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スクロールに応じて要素がアニメーションする、視差効果（パララックス）を取り入れたWebデザイン例とTipsいろいろ - かちびと.net
