はてなブックマーク

最近はユーザインターフェイス（UI）やページ遷移などが、まるでネイティブアプリのように動作するウェブサイトが見られるようになりました。 jQueryのフォトギャラリー系のライブラリやプラグインはすでにたくさん存在するが、今回はCSS3アニメーションを要素の主な動作に使用しているS Galleryプラグインを使用してフォトギャラリーを作成します。 今回作成したサンプル ・フォトギャラリー http://www.html5-memo.com/sample/jq-books/09/ ブラウザ表示領域が広い（表示領域幅1025ピクセル以上）の写真のサムネイル一覧画面。サムネイルは3列で並べられています。 スマートデバイスなどのブラウザ表示領域が狭め（表示領域幅768ピクセル以下）の写真のサムネイル一覧画面。サムネイルは2列で並べられています。 サムネイルをクリックすると浮遊感を伴ったエフェクトと共

基本的にウェブページは縦長になるようにレイアウトされ、上下にスクロールしながら閲覧することが一般的で、横スクロール型のサイトはFLASHサイトなどで一部見られたが、特別な理由が無い限り導入されることはありませんでした。しかしサイトとして他にはあまりみられない個性の一つとなるため、うまく導入すれば印象的なサイトにすることができるかもしれません。 横スクロールが採用されない理由のひとつは、ユーザがスクロールバーを横にスライドさせる操作がしづらいことが理由のひとつだが、そういったユーザの不便さをJavascript、jQueryで操作系の機能を補助することで解消することができる。 今回はメニューによるダイレクトリンクの他、マウスホイールやスワイプ操作で横スクロールするウェブページを作成してみます。 今回作成したサンプル 【サンプル】横スクロールするページ（ベーシック） http://www.ht

複数の背景画像やパーツを異なる速度や方向で動かすことで生じる、視差を活かした奥行き感を演出するパララックス効果ですが、今回はマウスホイールに応じて1画面毎にページを遷移するパララックスを作成しナビゲーションと連動したカスタムを追加して1ページサイトのような形で作成してみます。 今回は各要素の挙動を直感的に設定できるjQueryプラグイン「Jarallux」をパララックスの実装に、マウスホイールによる制御を「jQuery Mouse Wheel Plugin」プラグインを使用して、マウスホイールに応じた1画面ごとのパララックス遷移を実装していきます。 まずはスクロールに応じた要素のパララックス遷移を実装し、マウスホイールの操作で1画面（スライド）分遷移する機能を実装し、ナビゲーションを設置して前後の画面へ遷移したり、任意の画面へ一気に移動するジャンプリンク機能を追加していきます。 今回作成し

最近のウェブサイト構造の1つに、従来は「会社概要」「お知らせ」といった系統のことなるコンテンツを別ページとして用意しておいた構造から、それらをすべて同じページに配置してみせるシングル（単一）ページという構造もよく見られるようになりました。 シングルページは、ページ遷移の面倒さや待ち時間にストレスからくるユーザーのサイト離脱を防ぐ事ができ、また最近のスマートフォンでのサイト閲覧においても、片手でスムースにスピーディに情報を得る事ができるので、とくに新商品、新サービスのキャンペーン系の特設サイトやランディングページに適した構造と言えるでしょう。 しかし、こういったシングルページサイトの構造は、どこからどこまでは1つの情報になるのかが分かりにくい場合があります。もちろん、デザインでそれを分かりやすく伝える事は大切でありますが、伝え手側がうまくユーザを誘導するようにすることも1つの方法です。今回は

フォトギャラリーなどでページをスクロールして、次の写真を見る際などに、クリックで続きを見るなどもあるが、ここでは特定の枚数を読み込んでスクロールした際に次の読み込みたい内容を自動的に読み込む形を作成してみます。 こうすることによってクリックすることなくサイト全体の写真を見ることなども可能となります。 ウェブページを下にスクロールし続けていくと、ページを遷移せずに次に来るべきコンテンツを自動で読み込んで同じページに表示し続け、あたかも無限にスクロールし続けるような仕組みは一般的に「無限スクロール」と呼ばれ、Twitterをはじめ、SNSのFacebookやGoogle+、画像共有サービスのPinterestなど大手ウェブサービスで導入されている。 今回はこの「無限スクロール」の仕組みを、その手軽さから多くのサイトで導入されているInfinite Scrollプラグインで実装してみよう。 今回

前回は、グラフィックスペースをブラウザ全体を使用してグラフィカルに見せる作例を作成しましたが、今回はPinterestのようなコンテンツの内容によって一定ではなく隙間なく埋めていくレイアウトをmasonryプラグインを使用して作成してみたいと思います。 カラム（写真などコンテンツを含んだひとまとまりの要素）を一定サイズに整然と並べるのではなく、それぞれの持つ幅や高さを生かして、タイル状に隙間無く敷き詰めるレイアウトを作り、バリエーションとして横幅サイズの異なるカラムの配置や、カラム幅の相対指定方法など配置を調整することもできます。 今回作成したサンプル 【サンプル】各カラムの幅をピクセル（絶対値）指定。カラム幅は一定 http://www.html5-memo.com/sample/jq-books/06/sample1_basic.html コンテンツを敷き詰めるプラグイン「masonr

前回は、クリックで開閉するスライドメニューを作成しましたが、今回はメイングラフィックスペースをグラフィカルにするスライダーを作成します。 ページ上部のメイングラフィックスペースに複数の情報を表示させるようにするスライドショーを作成する。今回は、メインの画像が中央に、その両側には前後のグラフィック画像に黒い半透明の画像が被さった状態で表示されるスライダーを作成します。 前後の画像が両側に表示されるため、ウィンドウサイズが変わっても横幅いっぱいに画像が表示され、よりグラフィカルなイメージを与えることができます。 今回作成したサンプル 【サンプル】ブラウザ一杯に広がったメイングラフィックに最適なスライドショーを作成する http://www.html5-memo.com/sample/jq-books/08 スライドショーのHTML ヘッダーエリアの上にスライドショーを設置するが、レイアウトによ

ウェブサイトでスクリーンサイズ目一杯の大きな画像を使用したり、海外の画像共有サイトPinterestのように大量の画像をコンテンツとして敷き詰めるようなサイトでは、画像やコンテンツの魅力や迫力を損なわないように、余計な文字情報やユーザーが操作するメニューを小さくあつかったり、普段は隠しておいて必要なときに表示するようにしている場合が多くあります。 また、モバイル環境でのサイト閲覧も年々増加していることから、限られたスクリーンサイズの中でいかにユーザーが情報を見やすく、且つ使いやすいインターフェイスを提供するべきかを考えると、モバイルアプリのUIにならって、ウェブサイトでも主なメニューを通常隠しておいて、必要なときに出現させて利用できる仕組みを提供することは１つの解決方法として必須になるだろう。このような仕組みを提供する場合は、ユーザーに隠れているメニューの存在を気付かせると同時に、直感的な

Webサイトやモバイルサイトのワイヤーフレームがたくさん！でレイアウト作りの参考に役立つ「UI TITES」と「UXKITS」 最近、自分の中でWebサイトの参考としてPinterestがとても便利で毎日みてるのですが、かっこよいサイトの他にレイアウトの例としてUIやUXに特化したボードなどもありチェックしています。 そんな時見つけた、Webサイトやスマホサイトを画面構成を作る際にたくさんのモジュールが用意されている「UI TITES」と「UX KITS」がシンプルだけですが組み合わせによって色々なレイアウトが作れるのでとても参考になりますので紹介します。 http://pixelbuddha.net/ui-tiles/ こちらは72個もモジュールがあり無料でダウンロードができます。 PHOTOSHOPデータやイラレデータがありますので、個々のモジュールを組み合わせてWebサイトのワイヤー

前回は、ソーシャルボタンをまとめて設置ができるプラグイン「jQuery.socialbutton」を使用しましたが、今回はレスポンシブレイアウトなどで使用する画像をふりわけるプラグインを使用して画像の切り替えを行います。 PCとスマートフォンなどのモバイル端末でレイアウトを最適化させる為の手法のひとつとしてレスポンシブレイアウトが使われるようになっているが、同じソースコードしてCSSなどでレイアウトを変更させるので作成は比較的用意だが、なにもしない場合は画像は双方で使用されてしまうため、グラフィックを多用するサイトではレイアウトは最適化してもデータ量は同じものとなってしまう。そこでデバイスによって使用する画像を切替えるようにしてスマートフォンでは軽量な画像を自動的に振り分けるようにしてみる。 今回作成したサンプル 【サンプル】PCとスマートフォンで画像を切り替える http://www.h

自身のサイトやブログを拡散させるために使用するソーシャルボタンですが、それぞれ使用するサイトからひとつづつ作成することはできますが簡単にまとめて設置ができるプラグイン「jQuery.socialbutton」を使用してソーシャルボタンを設置してみます。 今回作成したサンプル 【サンプル】ソーシャルボタンをまとめて配置する http://www.html5-memo.com/sample/jq-books/17 プラグインの導入 各種ソーシャルネットワーキングサイトの「いいね！」ボタンを導入できるプラグイン「jQuery.socialbutton」（http://itra.jp/jquery_socialbutton_plugin/）。 まずはjQuery本体とjquery.socialbuttonプラグインを読み込む 挿入できるソーシャルボタン facebookいいね facebook S

jQueryのフォトギャラリー系のライブラリやプラグインはすでにたくさん存在するが、今回はCSS3アニメーションを要素の主な動作に使用しているS Galleryプラグインを使用してフォトギャラリーを作成します。

ブラウザをスクロールさせても、表示領域の上部にヘッダーやナビゲーションなどの特定の要素を常に固定位置に表示させることはCSSのみでも可能だが、ページレイアウトの都合で、最上部にPR画像のような固定表示させたくない要素、そしてその下にヘッダーのような固定表示させたい要素がある場合は、Javascriptでブラウザのスクロール位置や要素の高さなどを取得し、任意のタイミングで特定の要素を固定表示させることで実現できます。ファーストビューをPRスペースとしてより目立たせたいときに有効です。 今回作成したサンプル 【サンプル】特定の位置でヘッダーエリアを固定させる http://www.html5-memo.com/sample/jq-books/01 ヘッダー部分のHTMLとCSS 今回のサンプルはページの最上部をPRスペースとしてメインビジュアル画像を配置し、その下にページ上部に固定配置させたい

新しくなったKeynoteではiPhoneやiPadをリモコン代わりにして、PCのKeynoteを操作するためのに以前無償で提供されていた「Keynote Remote」がなくなって、Keynote単体でリモート操作ができるようになったようなので、その設定方法やリモート操作でのメリットなどをまとめてみました。 パワーポイントよりもうちょっとかっこよく資料を作りたい プレゼン資料を作ることは、デザイナーにとっては、あまり機会はありませんでしたが、最近ではデザイナーでも勉強会やLTなどで発表する機会が多くなってきたり、Slideshareなどにアップする機会なども増えてきました。 パワーポイントでかっこいい資料が作れないということではないのですが、PowerPoint苦手だなとか、オフィス系のソフト難しそうだな思っているデザイナーの人は多いのではないかと思います。自分がまさにそうで何度トライし

前回は、ベーシックなタブでのコンテンツの切り替えや出現方法などについてまとめましたが、今回は、リンク部分やフォームなどにマウスカーソルをあてると説明や入力サポートなどを表示させるツールチップを作成してみます。 リンク部分にマウスカーソルを当てた際にリンク先や内容説明のための説明のテキストを入れる場合にtitle属性を指定すると吹き出しのように入力した内容がでてくるが、小さかったり、一瞬で消えてしまうので、よりわかりやすく吹き出しのデザインをしてリンク先の内容の説明や入力フォームのサポートなどに使用するツールチップを作成してみました。 今回作成したサンプル 【サンプル1】title属性または、data-tips属性にtipsを設定する http://www.html5-memo.com/sample/jq-books/04/ 【サンプル2】title属性にtipsを設定する http://w

今回は、ベーシックでよく見るタブパネルの実装を行ってみます。切替時のアニメーションやマウスクリックやロールオーバーなどでの切り替えなどいくつかのバリエーションも作成してみました。また汎用性を考えてjQueryプラグインとして作成してみました。 少ないスペースを利用して多くの情報を掲載する際によく使われるタブパネルは、更新情報などでカテゴリー毎に掲載したり、複数の商品の紹介などに使うことができます。 今回作成したサンプル サンプル1ではタブパネルの幅をテキストの量によって変わるものと幅を固定して一定のサイズにするサンプルを作り、サンプル2では切り替えをクリックとマウスオーバーによって切り替わるパターンと内容部分をフェオードアニメーションにしました。 【サンプル1】 タブパネルの幅をテキストのサイズによってと一定に固定させるサンプル 【サンプル2】 クリックやマウスオーバーでの切り替えやフェー

前回は、ページの背景に一枚画像を表示させ、ランダム表示やフェード切り替えなどをおこないました。 今回は、縦長ページでのページの先頭部分へ戻る仕組みはページ内リンクで設定できるが、ここではページトップへの基本と移動アニメーションの動きについて、またボタンの現れるタイミングについていくつかとりあげてみます。 今回作成したサンプル 通常のボタンが下にあるパターンの他にフェードで現れるパターンとCSS3で下からアニメーションするパターンの3つを作成しました。 ページ下部にある通常配置のサンプルを見る スクロールするとフェードでボタンが出現のサンプルを見る スクロールすると下からアニメーションでボタンが出現のサンプルを見る アンカーリンクとボタン部分のHTML ページ先頭へ戻るのリンクにはページ内リンクとして、以前はa要素にname属性やid属性を使用していたが、HTML5からはページのアンカーを表

今回はブラウザ全体に写真を配置したサンプルです。CSSなどでも背景に写真を配置することができますが、様々なウインドウサイズによって表示領域を制御するためにjQueryを使用して作成してみました。 一枚画像の表示だけでは簡単なので、背景画像をランダムに表示させたり、複数枚をフェードアニメーションで切り替えるサンプルを作成しています。 写真をメインにしたり、グラフィカルなサイトを作成する場合に便利なサンプルになっていると思います。 今回作成したサンプル 背景に写真を配置したサンプルを見る 背景画像をランダムにし一定時間でアニメーションさせるサンプルを見る ビジュアル画像をHTMLに読み込ませる 今回は背景に表示させる画像はCSSでの背景画像指定ではなく、表示させる領域を制御するためにdiv#background内にimg要素にて配置した画像を画面全体に表示させます。 画像が拡大縮小されるからと

Bigvideoプラグインを使用してvideo要素で動画をブラウザの背景全体に再生させる（レスポンシブ対応）【jQuery連載02】 前回は、jQueryの「tubular」プラグインを使用してYOUTUBEにアップロードした動画を背景に表示させるサンプルを作成しました。（前回の記事はこちら） 今回は、jQueryの「Bigvideo」プラグインを使用して作成しました。 YOUTUBEなどの外部サイトの動画でなく自分のサーバーにある動画を背景に流したい場合におすすめのサンプルです。 前回同様に背景に動画だけを作るだけなく、ロゴやナビゲーションやコンテンツ内容を入れてWebサイトのTOPページのデザインのようなサンプルを作成してみました。 今回作成したサンプル サンプルをみる HTML5 Video要素で扱える動画ファイルに気をつけよう HTML5 Video要素で扱える動画はブラウザごとに

jQueryのtubularプラグインを使用してYOUTUBEの動画をブラウザの背景全体に再生させる（レスポンシブ対応）【jQuery連載01】 最近Webサイトでブラウザの背景全体に動画を配置してインパクトのあるサイトを見ることがありましたので、2回に分けて、YOUTUBEにアップロードした動画や自分のサーバー上の動画をvideo要素を使用して配置するサンプルを作成しました。 まず初回はYOUTUBEの動画を背景に表示させるjQueryの「tubular」プラグインを使用してインパクトのあるページが作れるサンプルです。 このプラグインでよく見かけるのはただ動画を背景に配置しただけのサンプルが多いので、今回はサイトのデザインとして使えるように、ロゴやナビゲーションやコンテンツ内容を入れてWebサイトのTOPページのデザインのようなサンプルを作成してみましたので、背景に動画を流したい場合にお

超シンプルフレームワーク「Responsive Grid System」に画像対応などしてレスポンシブWEBサイトをつくろう（カスタマイズ編） 前回紹介した超シンプルで簡単にレスポンシブWebサイトが作れるフレームワーク「Responsive Grid System」に画像のスマートフォン時の対応や簡単なレイアウトを付け加えてブログフォーマットのベースになるような形をつくってみたいと思います。 前回の導入編をご覧になっていない場合はこちらからご覧ください。サンプルファイルの使い方などをまとめています。 超シンプルなフレームワーク「Responsive Grid System」でレスポンシブ対応サイトをつくろう（導入編） 今回はカスタマイズ編として、画像を使用する場合のレスポンシブ対応や、実際に原稿を入れる際に使用するHTML5の要素などを紹介しながら簡単なブログ風フォーマットを作成してみよ

超シンプルで簡単なフレームワーク「Responsive Grid System」でレスポンシブWEBサイトをつくろう（前編：導入編） 最近は様々なレスポンシブ対応のフレームワークがでていて、これらを使うことによって簡単にPC、タブレット、スマートフォンに対応したサイトが作成できるようになりました。 そこで今回は本ブログのリニューアルで使用した、モバイルファーストを意識した超シンプルで簡単なレスポンシブフレームワーク「Responsive Grid System」の使い方を解説していきます。 本ブログのリニューアルや、先日発売された書籍「HTML5デザイン 仕事のネタ帳 CSS3+JavaScript+CSSフレームワークと活用するプロのテクニック」でも8P執筆させていただきましたので、2回に分けてベースのサンプルを解説する「導入編」と実際に使用する際に必要なカスタマイズをする「レイアウト作

写真加工やWebサイトデザインなどで使用するPhotoshopですが、画像補正やグラフィック作成などの合成処理では、画像の選択範囲を自由に取れるようになるというのがPhotoshopで画像補正や合成を勉強する上での基本となります。 Photoshopを使って画像の切り抜きや選択範囲を取得にはどういう機能を使うのか？ と思う人もいると思います。 しかしこれは決まったツールや使い方というのではなく、使用する写真内の色情報や取得したい選択範囲の内容によってツールの向き不向きがありますので、それぞれの選択範囲の取得方法の特性を理解する必要があります。 今回はPhotoshopで写真の切り抜きや選択範囲を取得するツールの紹介と簡単なポイントを簡単ですがまとめ、あわせて参考になるサイトやADOBE TVの動画などもまとめてみました。 Photoshop初心者の人に向けてまとめていたのですが、選択範囲の

WordPressや通常サイトでYoutubeやVimeoの動画の埋め込みをCSSで簡単にレスポンシブWeb対応にさせる方法 レスポンシブWebで作られたサイトでは自分で作成した画像などはCSSで対応させますが、Youtubeやvimeoなどの外部サービスを埋め込む際にレスポンシブ対応させる簡単な方法をまとめます。Wordpressの投稿などでも簡単に設定できるのでとても便利です。 Youtubeの埋め込みサンプル PCではブラウザウィンドウを小さくしたりすると自動的に動画サイズもコンテンツエリア内で縮小されていくと思います。タブレットPCやiPhoneなどのスマートフォンでも画面内に収まっています。 一見難しそうな外部サイトのレスポンシブ対応ですが、CSSのみで簡単に行うことができるので設定方法を見ていきます。 HTML側では投稿時にclassを追加 YoutubeやVimeoから取得し

ショートカットを使用して作業効率をあげよう PhotoshopやIllustratorを始めた人達で、基本操作を覚えて脱初級者というステップで、作業効率を早めるのにショートカットキーを使いこなす。ということがあります。 ショートカットキーは使わないと忘れちゃうので、習慣になるまでは、はじめは遅くなってもよいのでなるべく基本系のショートカットキーを使っていって、それから自分がよく使う作業のショートカットをどんどん覚えたりしていくとよいでしょう。 Photoshop/Illustratorショートカットについて 今回まとめた内容は、すべて基本のショートカットなので、すでに使っている人も多いと思いますが、これから始める方などに、まずは簡単な「ファイル操作」「保存」「コピー＆ペースト」「取り消し」「ズーム・手のひら」などをまとめまてみました。 これらはデザイン作業でなくても、通常の作業系のショート

【書籍プレゼント】すぐに使えるサンプルがたくさん！『現場でかならず使われている jQueryデザインのメソッド』発売いたしました。 エムディエヌコーポレーションよりjQueryを使用して、ベーシックな使い方からプラグインを活用した流行の手法までをサンプルと共に紹介する『現場でかならず使われている jQueryデザインのメソッド』発売いたしました。。 ページ最後に出版社様から本書を3冊プレゼントいただきましたので3名様にプレゼントがあります。 『現場でかならず使われている jQueryデザインのメソッド』 (2014/4/25) amazonで見る MdNで見る 『現場でかならず使われている jQueryデザインのメソッド』概要 jQueryの最大の特長は、通常のJavaScriptよりもシンプルなコードでWebサイトの動的な“ふるまい”を記述できる点です。CSSと同じセレクタが利用できるた