Beautiful Slide Out Navigation: A CSS and jQuery Tutorial | Codrops
Today I want to show you how to create an amazing slide out menu or navigation for your website. The navigation will be almost hidden – the items only slide […] Today I want to show you how to create an amazing slide out menu or navigation for your website. The navigation will be almost hidden – the items only slide out when the user hovers over the area next to them. This gives a beautiful effect
2013年、世界を最もHAPPYにしたWebサイトは？
どうやらそれは、PHARRELL WILLIAMS – 24 HOURS OF HAPPY。元N.E.R.Dのシンガー、ファレルのミュージックビデオに連動した、インタラクティブなサイトです。 デジタル・クリエイティブ界での絶賛 権威あるWebデザインのアワードサイト “FWA” での Site Of The Year 受賞に続き、同じく質の高いデザインが集まる “Awwwards” でも Site Of The Year User’s Choice を受賞！FWAの受賞記事では、各国のデジタルクリエイターたちが手放しで絶賛しています。このサイトはモバイルに対応していないにもかかわらず、今日時点のView数は670万回。YouTubeのオフィシャルMVは、なんと4千万再生以上…！ （ピンと来ない人は、まず4分7秒のオフィシャルMVを見てみるといいかも。4分を24時間に「延ばす」ことの意味がな
1日100サイト見て分かったWebレイアウトの傾向 2013/11-12
最近いいWebデザインを見る時間がなかったので、一念発起してAwwwardsから「１日で100サイト」見てみました。 だいたい１サイト３分で、3 x 100 = 300min = 100サイト見るのに5時間かかりました。対象はSOTD (Site Of The Day：入選みたいなやつ)と、”Business/Corporate”カテゴリのHonorable Mention（佳作みたいなやつ）です。12月と11月の更新分だけで100サイト以上ありました。 後半はだいぶ飽きてきたのですが、やはり集中して見ることでいろいろなパターンが見えてきます。昨今のWebデザインのトレンドは「フラットデザイン、可変グリッド、フルスクリーン、パララックス」とのことですが、日々ワイヤーフレームを描くWebディレクターの立場から、もう少し細かい気になった点をメモします。 縦長ページのどこにグロナビを固定させるか
美しいグラデーションが簡単に利用できる！グラデの種類が豊富に揃ったmixinとスタイルシートのまとめ -SuperGradient
垂直・水平のベーシックなグラデーションをはじめ、放射状や斜め方向のグラデーションなど、さまざまな美しいグラデーションを描くmixinをまとめた「SuperGradient」を紹介します。 ↓4色を使った斜めのグラデーション、美しいですね！ SuperGradient SuperGradient -GitHub SuperGradientではグラデーションのタイプとカラー、そのカラーが始めるポイントを指定するだけで、簡単に美しいグラデーションが描けるSassのmixinがまとめられています。 下記に、そのmixinの使い方とスタイルシートでの記述も添えてみました。 Vertical, 2 colors 2色を使った垂直方向のグラデーション mixinの使い方 @include sgradient( $colors: ( (#31B7D7, 0%), (#EDAC7D, 100%) ) );
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
しっかりと理解しておきたい！レスポンシブWebデザインを使いこなすための9つの基本原則
レスポンシブWebデザインは、デスクトップやスマホやタブレットなどさまざまなサイズのスクリーンの問題に対する素晴らしい解決方法です。 レスポンシブWebデザインをより深く理解するための基本原則を紹介します。 9 basic principles of responsive web design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 レスポンシブWebデザインのツールもリリースされているので、ぜひ！ FROONT -Responsive Web Design Tool レスポンシブとアダプティブ Webデザイン フロー 相対的なユニット ブレイクポイント 最大限と最小限の値 オブジェクトのネスト モバイルファースト or デスクトップファースト Webフォントとシステムフォント ビットマップ画像とベクター レスポンシブとアダプ
デザイナー必見 ハイクオリティなフリーストックフォトサイトまとめ「10 More Websites for Free Stock Photos」
TOP > WebService > デザイナー必見 ハイクオリティなフリーストックフォトサイトまとめ「10 More Websites for Free Stock Photos」 デザインの素材として欠かせないものの一つとして取り上げられる写真。しかし時には撮影の予算がなく、ストックフォトから写真を選ばなくてはならないことも。今回はそんなシーンにおすすめな、ハイクオリティなフリーストックフォトサイトまとめ「10 More Websites for Free Stock Photos」を紹介したいと思います。 Skitterphoto | Free to use public domain (CC0) photographs デザイン性の高い写真を多数収録したストックフォトサイトが10種、紹介されています。気になったサイトをピックアップしましたので、下記よりご覧ください。 詳しく
Sneakpeekit Sketch Sheets
Catch insights, sketch ideas.Printable Wireframe Templates for Designers Planning apps or websites is not always completely digital: sometimes you may need pencil, paper and some good sketch sheet templates to speed up your creative process. Precision GridMultipurpose grid with column marks A generic A4 grid template with column marks ideal for website wireframes as well as icon, font and logo des
ここまでできる！Bootstrapで作られた国内のレスポンシブWebデザインのサイトまとめ20個 | A40
レスポンシブWebデザインのサイトは国内でも増えてきましたが、制作するとなるとかなり手間がかかります。 そんなとき役に立つのがレスポンシブWebデザイン対応のフレームワーク。中でも「Bootstrap」は、多彩な機能を備え、その使いやすさから広く知られています。 そこで今回は、国内の秀逸なレスポンシブWebデザインを集めた「Responsive Web Design JP」から、Bootstrapを使って作られたサイトをご紹介したいと思います。 whiteSTOUT フォトクリエイティブを中心としたマネージメントオフィスのサイトです。トップに大きな画像を使い、洗練されたイメージとなっています。 AGATHA E-SHOP アクセサリーブランド「AGATHA」のECサイトです。有名ブランドの、しかもECサイトにもBootstrapが使われています。 ACTUS online こちらは有名イン
jQueryによるフォームのデザインの基礎（前編） (1/3)
前回まではjQueryの基本的な使い方である、「セレクターで(X)HTML要素を指定し、イベントが発生したタイミングで(X)HTMLやCSSを書き換える」プログラムの書き方を紹介してきました。jQueryにはほかにも、Webページを使いやすくする便利な機能が用意されています。今回からは、これまでに触れていない特別な機能を紹介していきましょう。 第8回は、「問い合わせフォーム」など、商用サイトには欠かせない(X)HTMLフォームをjQueryで制御する方法です。jQueryには、1．フォーム部品の値を取得・変更する命令、2．フォームに関するイベントの処理、2．フォーム部品を選択するセレクター――といったフォーム関連の機能が揃っています。 1.フォーム部品の値を取得・変更する命令 フォームを操作する専用の命令が、val() です。val() を使えば、フォームに入力／選択されている値を取得した
クライアントワークでよくお世話になっているjQueryプラグインいろいろ
私が仕事で Web制作をする時に、よく利用させてもらっている jQuery のプラグインをまとめてみました。ライセンスは MIT、GPL のものばかりです。デザイン、レイアウト的に汎用性のあるものになっています。また、IE 特有のバグ（透過PNGの黒ずみなど）対策についても少し触れてみました。 Webサイトを作る時に、何かとお世話になっている jQuery のプラグイン。HTML と CSS だけでは表現できないことも、Javascript を使うことでいろいろできるようになりますよね！インターネットを見ていると、本当にたくさんの jQuery のプラグインが公開されています。feed を読んでいても、1日一個くらいは新しい jQuery のプラグインに出会います。どれを使ったらいいか迷うくらい … 。 今回は、そんな数ある jQuery のプラグインの中から、 私がクライアントワーク（仕
エンジニアこそ色彩デザインを学ぼう - ppworks.jp
学ぼうよ、と思っていて、 新人デザイナーのための色彩デザイン・配色のルールを学べる本 作者: 柘植ヒロポン出版社/メーカー: ソシム発売日: 2011/10/01メディア: 単行本 クリック: 1回この商品を含むブログを見る を読んでいました。 @ken_c_lo氏が以下のスライドで触れていますが、エンジニアがデザイン学ぶのマジオススメとのことです。よっしゃ、学ぼう。 新人デザイナーのための色彩デザイン・配色のルールを学べる本 新人デザイナーのための色彩デザイン・配色のルールを学べる本 作者: 柘植ヒロポン出版社/メーカー: ソシム発売日: 2011/10/01メディア: 単行本 クリック: 1回この商品を含むブログを見る WEBというより印刷のデザイナー向けの本なのかな？という印象なのですが色の使い方という意味では勉強になりました。 特色の話やCMYKプロセスカラーの話は一旦無視しながら
UIデザイナーが理解しておくべき11種類のナビゲーションと特徴 | ベイジの社長ブログ
WebサイトやアプリケーションのUIは、いくつかの要素の組み合わせで構成されますが、使いやすさに最大の影響を与えるのはナビゲーション要素でしょう。ナビゲーションのデザインを制する者がUIデザインを制する、といっても過言ではありません。 というわけでここでは、UIで最も大事な要素、ナビゲーションというものを整理して理解するために、その種類と特徴をまとめてみました。 1. グローバルナビゲーション ユーザがWebサイトやアプリを使う際に、もっともよく使われるのが、このグローバルナビゲーションです。通常は画面のどこかに常設されており、画面遷移をしても、決まった場所に、決まった並びで必ず表示されます。 メニューの構成方法としては、情報種別、機能種別、対象者／状況別、利用頻度別などの切り口があります。 Appleサイトのグローバルナビゲーション。どの画面でも、同じメニュー構成・同じデザイン・同じ場所
Bootstrap 3 を WordPress で使ってみる | Web Design Leaves
コンポーネントをカスタマイズ（色やラウンドコーナーの値を変更）してダウンロードするには、「Customize」のページでそれぞれの値をカスタマイズして、ページ最下部の「Compile and Download」をクリックする。 jQuery の読み込み Bootstrap 3 を使用するには jQuery が必要なので、 jQuery を header.php や functions.php で読み込む。WordPress はデフォルトで jQuery ライブラリが同梱されているが、以下は functions.php で CDN から読み込む場合。（同梱されている jQuery ライブラリを使っても問題はない） 訂正 この場合「add_action()」で wp_print_scripts フックを使うとバージョン 3.6 からはデバグモードでは Notice エラーが表示されるので、代わ
フラットデザインで使われている色｜カラーコード付き
こんにちは、コプロシステムWebデザイングループの石川です。 当ブログの6/12付エントリー『UIデザインの2013年のトレンド「フラットデザイン」の事例・16個』で、 2011～2012年頃から「フラットデザイン」というデザイン手法が注目を集め始めていること Googleトレンドの指標を見ると2013年に入ってから急上昇をし始めていて、間違いなく今年のWebデザインのトレンドであること フラットデザインとは、特徴 事例サイトの紹介 などを書かせていただきました。 アクセス解析ツールでアクセス状況を見ていると、「レスポンシブWebデザイン」について書いているエントリーの次に、「フラットデザイン」について書いている上記エントリーにアクセスが集中している傾向にありましたので、今回のエントリーでは、そのフラットデザインなWebサイトたちでどんな色が使われているか、前回ご紹介した事例サイト（＋α）
成果につながるLP制作のノウハウ記事14選|初心者～上級者のお悩み別テクニック集 | LISKUL
世の中にランディングページに関する記述は無数に存在します。 しかし、情報量が多すぎて探している記事を発見することが困難だと感じている人も多いのではないでしょうか。 そんなあなたのために、過去リスクルに投稿されたランディングページに関する記事を「これから作りたい」「さらに獲得を伸ばしたい」などのステージ別にまとめてみました。 初めてのランディングページ製作や、既存ランディングページの改善の際には、ぜひとも参考にしてみてください。（参考：ランディングページ制作会社の一覧 ≫） ※ランディングページ改善に重要な要素を大きく4つに分け（ファーストビュー、ライティング、導線、その他のポイント）それぞれの項目で訴求ポイントのチェックが行えるシートを無料で公開しています。こちらもご参照ください。 新しくLPを作る方へ│成果の出るLPの作り方ランディングページは作り方次第で成果が2倍3倍と大きく変わります
これ結構使えた！サービスサイトやWordPressテーマで使われている小技まとめ
作成：2014/05/19 更新：2014/11/01 WordPress > ウェブサービスサイトや最近のWordPressテーマで使われているエフェクトや小技をまとめました。今回またjQueryが多くなってしまいましたが、サイト制作時に一手間加えたくなる小技集です。 エンジニア速報は Twitter の@commteで配信しています。 もくじ サイト読み込み時 １．画像読み込み時、ローディング画像を表示／jQuery ２．読み込み時に文字を動かす／jQuery ヘッダー ３．文字の拡大・縮小／jQuery ４．入力補助／jQuery ５．伸縮するサーチボックス／jQuery コンテンツ ６．中心に水平線を入れる／CSS ７．均等に並べる／段組み／CSS ８．コンテンツが現れた時にアニメーションさせる／jQuery ９．マウスホバーで画像を拡大しキャプションを出す／jQuery １０．マ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブデザインのセンスを磨こう！ 2014年洗練されたディテールのUIデザインのまとめ
PC/スマホで使えるスライドメニュー「Shifter」:phpspot開発日誌
これはスゴイぞ！Bootstrapのページ作成が積み木感覚で簡単にできてしまうジェネレーター -lollytin