【jQuery】壮大な宇宙をウェブページの背景に描く［Starfield］の使い方。
以前CSSベースのオリジナル・デザインで［DarkForce.css］というテクニックを紹介しました。 宇宙空間をワープするようなダイナミックな動きで、完全にスタイルシートのみで実装できる点がウケて多くの方にダウンロードいただけました。 今日は［DarkForce.css］と同じように、宇宙空間をウェブページ上に描くjQueryプラグイン［Starfield］を紹介します。 まずはサンプルをご覧いただきたいのですが、ここは試しに［DarkForce.css］と［Starfield］を見比べてみると面白いかもしれません。 実装サンプル：CSS3 DARKFORCE 実装サンプル：Starfield どちらも『男のロマン』を掻き立てますよね！ 使い方は超カンタン！ 基本的にはjQueryの設定だけです。 ［jQuery Starfield］の使い方 何はともあれ。 まずは必要なファイル［jqu
広告・バナーデザインの参考にしたいギャラリーサイト10選
Web サイトのバナーを作成するときに、なかなか良いバナーのデザインが思い付かず、作業が進まないことはありませんか？そのようなときに便利なのがバナーデザインのギャラリーサイトです。 今回はバナーデザインの参考になる日本と海外のギャラリーサイトをまとめました。サイズや業種別などでカテゴライズされているサイトも多く、非常に便利なのでぜひ活用してみてください。 国内サイト Banner Matome http://bannermatome.com/ 17,100個（2016年8月9日現在）ものバナーがまとめられた日本最大級のバナーギャラリーサイトです。カラー・業種・表現別にバナーを探すことができます。 テキスト風、立体風、手書き風、イラストなどの表現で探すことができ、掲載するサイトに合ったテイストのものを探しやすいです。 Retrobanner http://retrobanner.net/ 6
16種類（45カテゴリ）の業界150サイトの調査から分かるスマートフォンサイトUIの現状10選（スライド付）
2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。 我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。 しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。 というわけで少々前置きが長くなりましたが、今回は昨今
OGP画像シミュレータ | og:image Simulator
OGP画像シミュレータとは？ FacebookのOGP画像は正方形で表示されたり横長で表示されたりするため、デザインがとても大変。 そんな時に便利なのがこのOGP画像シミュレータ。 デザインしたOGP画像をドラッグ&ドロップし、タイムライン上でどう見えるかシミュレートしてみましょう。 https://ogimage.tsmallfield.com/ 1200 x 630 px 以上推奨 https://developers.facebook.com/docs/opengraph/creating-object-types/#properties 最低でも 600 x 315 px、また大きければ大きいほど良いため 1200 x 630 px 以上の画像サイズが推奨されています。画像がクリッピングされるのを防ぐため、縦横比をなるべく1.91:1に近づけるようにしましょう。 （2014年01月
今からでも間に合う！レスポンシブWebデザイン作り方のまとめ
photo by Scolirk 地方でもマルチデバイス対応を求められることが多くなってきました。 徐々に対応しているところが増えてきたためだと思います。 私も昨年からレスポンシブWEBデザインについて、 対応する必要がありましたので、調べたものをまとめてみました。 もくじ レスポンシブWebデザインとは？ ギャラリーサイト レスポンシブWebデザインの作り方 画像の切り替え・最適化 レスポンシブ対応のフレームワーク レスポンシブ対応のライブラリ サイトの高速化 レスポンシブWebデザインとは？ 2年程前から流行し始めたレスポンシブWebデザイン。 基本的な考え方、メリット・デメリットを理解しておかないとトラブルの元になります。 レスポンシブWebデザインの基本 レスポンシブWebデザインの基礎 必読！5分でわかる流行のレスポンシブWebデザインまとめ | 株式会社LIG 5分で分かるレス
[JS]納品前の確認に最適、使用されていないCSSのセレクタを見つけ出すスクリプト -Helium
ウェブサイトの多数のページ全体に渡り、スタイルシートで定義されたセレクタが使用されているかどうかチェックし、使われていないセレクタのレポートを生成するスクリプトを紹介します。 納品する際に、不要なセレクタを除去するのに役立ちますよ。 Helium -GitHub Heliumの準備 Heliumの使用方法 Heliumの準備 HeliumはjQueryなど他のスクリプトを必要せず動作し、URLのリストから全てのページをロードし、解析して、スタイルシートで見つけたセレクタが全ページで使用されているかどうかチェックし、レポートを作成します。 スクリプトは、開発環境で実行してください。 公開中のサイトで実行すると、ユーザーにもHeliumの動作が見えてしまいます。 Step 1: 外部ファイル テストするページの全てに、当スクリプトを外部ファイルとして記述します。 場所は、head内でも</bo
[CSS]背景を固定させて、カーテンのようにスクロールさせるテクニック | コリス
去年くらいからよく見かけるようになったスクロールすると、カーテンを持ち上げるように次々にコンテンツが表示されるテクニックをスタイルシートのみ版とスクリプト併用パワーアップ版の二つを紹介します。 まずは、スタイルシートのみ版から。 Fixed image backgrounds スクロールするとヘッダは固定表示で、画像を配置した背景がカーテンを持ち上げるように次のコンテンツが表示されます。 背景は写真も面白いですが、ソリッドなカラーでも面白い効果が得られますね。 Fixed image backgroundsをスクロール 実装はシンプルです、ポートフォリオなどでよく見かけるテクニックです。 Demo 1のHTML HTMLの基本構造は、header要素があり、各スライドはsection要素です。section内には見出しやテキストや画像などを自由に配置できます。 <header> <a hr
ちょっとまてｗｗｗｗｗｗ今気付いたけどｗｗｗｗｗｗｗはなまるうどんのエイプリールフールサイトのソースｗｗｗｗｗｗｗｗ
ちょっとまてｗｗｗｗｗｗ今気付いたけどｗｗｗｗｗｗｗはなまるうどんのエイプリールフールサイトのソースｗｗｗｗｗｗｗｗ
Wii U｜ウェブサイト制作者向けインターネットブラウザーの拡張機能について｜Nintendo
Wii Uの『インターネットブラウザー』では特別なJavaScriptを用いることでGamePadのボタンや状態を取得したり、動画や画像(JPEG形式)の表示を切り替えることができます。 ウェブサイトを制作する際の参考としてご活用ください。
HTML5 開発者向け iPhone 5 / iOS 6 での変更点等まとめ
iPhone 5 / iOS 6 における変更点などを、開発者向けにまとめた海外記事がありましたので、簡単にですが日本語にしてご紹介。対訳ではなくて、内容だけ伝わるようにかなり変更していたり、省略もしていますので、詳しくは原文をご確認ください。 iOS 6 がリリースされましたがアップデートされましたか？私はマップアプリをよく使うのですが、早速アップデートした方々の、マップがぁぁという叫びにびびってまだアップデートできておりません… で、まだ私の手元の iPhone 4S では iOS 5 が元気に動いている今日この頃ですが、iPhone 5 / iOS 6 における変更点などを、開発者向けにまとめた海外記事がありましたので、簡単にですが日本語にしてご紹介。対訳ではなくて、内容だけ伝わるようにかなり変更していたり、省略もしていますので、詳しくは原文をご確認ください。 原文 iPhone 5
[JS]ソーシャルメディアの不揃いなボタンを統一した美しいデザインでブログに設置するスクリプト -Koottam
Twitter, Facebook, Google+, RSSなど、ソーシャルメディアの不揃いなデザインのボタンを統一した美しいデザインにしてブログやサイトに設置するjQueryのプラグインを紹介します。 Koottam Social jQuery Plugin [ad#ad-2] Koottamの主な特徴 Koottamのデモ Koottamの使い方 Koottamの主な特徴 Twitter, Facebook, Google+などのアカウントを設定するだけで設置できます。 7種類のテーマがあり、CSSベースでカスタマイズも可。 カウントの表示はスタティック・アニメーションに対応。 カラーは簡単に変更できます。 より大きいカウント用に省略表記も対応。 MITライセンスのため、あらゆるブログ・サイトに使用しても無料！ Koottamのデモ
WEB屋が行き詰まった時、参考にすると何かが舞い降りるかもしれないサイト色々（主にデザイン系） | バンクーバーのうぇぶ屋
※煮詰まる× → 行き詰る○ なんかおもいっっきり日本語間違って使ってました。めっちゃごめんなさい＞＜ 更新が滞るとEvernote開いて整理整頓ついでに記事を書くのが日課になってしまったセナですこんにちは。 さて、数年WEB屋やってると、自分の作るものが単調になったなと思うことがたまにあります。WEBでも紙でも制作技術を学んでいた時はいろんなサイトを見て見まくって、「どうしてこんなに見やすいんだろう。」とか、「どうしてこんなに分かりやすいんだろう。」とか。そんなことを感じては、常に目にする物から何かを吸収しようと躍起になっていたものです。 何かを見る度、知る度に確実に何かを学んでいったあの感覚は、何時になっても忘れてはならないものだと常々思います。 アイデアに詰まっていたり、物づくりへの刺激が欲しい時なんかに見ると、やる気とかが舞い降りてくるかもしれません。 Dribbble クリエイタ
続) ガラケーからスマホの怒濤の流れで割を食い始めたサービス｜More Access! More Fun
先日、「ガラケーからスマホの怒濤の流れで割を食ったサービス」というタイトルでブログを書いたら、怒濤のリツイートで4万人近い人が2日で訪れてブログを読んでくれた。そのあとも1000〜3000人/日くらいと来訪者はけっこう高めに推移して、毎日せこせこ書いてる自分としては嬉しい限りだ。お金にならなくなってたくさんの人が毎日読んでくれると嬉しいもの。相当昔、SPA!とかPOPEYEにライターとして原稿書きまくっていたときのことを思い出します。 で、｢割を食ったサービス」ではなくて、「割を食いつつあるサービス」も最近相当に周囲に出てきている。それが誰もが思いもよらなかったところに出現しているのにはびっくりなのである。 自己紹介を読んでいただければわかるが、わたしの本業はネットストアの構築と運営コンサルタントである。いろんなショップさんと商品開発をし、運営を一緒に行っている。その中でスマホブームの弊害
ここが変わった！HTML5マークアップ入門 (1/6)
ローソン、無印良品、テレビ朝日など、国内でもHTML5で企業サイトを制作する事例が増えてきました。今すぐではないにせよ、「次のリニューアルはHTML5で制作したい」と考えるWeb制作者も少なくないでしょう。本連載では、「XHTML 1.0/HTML 4.01からの移行」をテーマに、HTML5マークアップの基本から実務で使用するポイントまで、ライブドアのマークアップエンジニア 浜 俊太朗さんが解説します。（編集部） 「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー＆デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き! HTML5マークアップ 現場で使える最短攻略ガイド 定価：2,808円 （
Facebookでウェルカムページを作るならばGoogleサイト連携が無敵
Facebookでページを作ると、デフォルトではWallページが表示されます。しかし、Wallはインスタントな情報が流れる場所なので、スタートページとしてはあまりふさわしくありません。そこで登場するのがウェルカムページで、ここにインパクトのある情報をのせれば、ページのファンを増やすことができます。 今回は、Facebookページにウェルカムページを簡単に作る方法を調べてみました。 どうやってつくる？ 一番多くみつかったのがTabSiteのような一部無料のアプリを使う方法。TabSiteの場合、無料で2ページ作ることができ、Webから簡単にページ編集ができます。これ以外にも効果的なファンページを作成するには？ 第１回：ウェルカムページにあるように、沢山のアプリがあります。 もう一つが、自分でアプリを作る方法。アプリを作れば、Facebookページ内でiframeを使って他のページを読み込むこ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
カスタマージャーニーマップとは？ UX向上を達成する7つの事例と作成方法 | 実践！ プロも使うラピッドUX手法
WebサイトをRetinaディスプレイに対応させる方法
iPhoneやiPad等にもWebサイトを最適化するレスポンシブWebデザイン構築に役立つフレームワークやTipsいろいろ - かちびと.net
株式会社VOYAGE GROUP
ファーストビューは何pxまで？ ブラウザの表示領域サイズ5年間の変化を大公開 | 初代編集長ブログ―安田英久
