制作時に欠かせないリセット用のCSS、ページのグリッドやレイアウト・コンポーネントが用意されたフレームワーク、クリック・タップやホバーやスクロールを楽しませるアニメーション、モバイルにもフレンドリーなCSSでつくられたアイコンなど、ゼロから用意するのはかなり大変なCSSの便利なフレームワークを紹介します。 リセット用のCSSはこの3種類 レスポンシブ対応の定番フレームワーク Material Designに対応したフレームワーク さまざまなアニメーションが簡単に実装できるCSS かわいいアニメーションを使ったローダー 使いやすいアイコンフォント・Pure CSSのアイコン リセット用のCSSはこの3種類 HTMLの各要素のブラウザごとに異なる差異をなくし、意図した通りに実装できるようスタイルをリセットするスタイルシート。 Reset CSS 2.0 HTMLの各要素のmarginやpadd

Googleウェブマスターツールの使い方やそれぞれのデータの見方をはじめ、検索の仕組み、Googleの新アルゴリズム、今必要とされているHTMLの効果的なマークアップ方法、スマホ対応、ユーザビリティやパフォーマンス改善など、ツールの使い方を通じて上位表示のための知識が身につくオススメの本を紹介します。 アナリティクスでは分からないGoogleBotの動きをウェブマスターツールで検証しましょう。

お馴染みの freepik.com 提供によるベクター素材をコリス限定で全員にプレゼント！ もちろん個人でも商用でも無料で利用できます。 今回は、アブストラクトな光の軌跡を描いた高品質なベクター素材です！ .psdは見かけますが、.aiや.epsが揃ったベクター素材はなかなか珍しいと思います。 freepik.comはウェブやグラフィックデザイナーのためのベクターやイラストやPSD素材の検索エンジンで、日本語環境でももちろん利用できます。アイコンに特化したflaticon.comも運営しており、こちらには現在70,000個以上のアイコンが無料で利用できます。 freepik.comでアイコンの検索する時は、下記のページからが便利です。 freepik.comでアイコンを探す またfreepik.comは、そのブログだけのオリジナルの素材を配布するコラボをしています。日本ではコリスが初！今回

個人ブログでも企業サイトでも新しいサービスを立ち上げる時に重要なのは、ロゴのデザインです。ロゴの作成は、デザインセンスがある人には簡単な作業でも、デザインが苦手な人にとっては悪夢かもしれません。 ロゴのデザインやカラーやフォントを難しいと感じる人は、ぜひこの記事を参考にしてください。ロゴのデザインにとても役立つ23のサイトをご紹介します。 ロゴ・ジェネレーター（ロゴ作成ツール） カラーを選ぶためのツール ロゴ用の無料アイコンがダウンロードできるサイト ロゴ用の無料フォントがダウンロードできるサイト ロゴのアイデアがもらえる情報源 ロゴ・ジェネレーター（ロゴ作成ツール） ロゴ・ジェネレーターはロゴ作成のための一番簡単な手段です。以下のサイトを使えば手早くロゴが作成できます。無料や低価格で利用できるので費用の節約にもなります。 それでは、一つずつご紹介します！ Logaster 会社名と業種を

IllustratorやSketchなどのグラフィックアプリ無しで、ワイヤーフレームをHTMLベースで作成できるスクリプト「Shireframe」を紹介します。 HTMLは通常通りでOK！ブラウザ枠や落書き風のスタイルは用意されており、簡単に作成できます。ブラウザで表示した時にはインタラクションも再現でき、画像化することもできます。 デモファイル：doodle.html HTMLはこんな感じです。 <div class="text-right vertical-margin"> <a>~Me</a> <a>Mail</a> <a>Pictures</a> </div> <div class="vertical-margin"> <row> <col-3 col-offset-3> <button class="btn btn-default width-100">Doodle search

bodyやページ上の各要素にレスポンシブ用のclassを付与、HTML, CSS, JavaScriptで利用できるブレイクポイントを一元管理、設定したブレイクポイントに応じて最適なサイズの画像を表示・レイアウトの変更など、レスポンシブ対応のWebページを制作する際に役立つスクリプトを紹介します。 Restive.JS Restive.JS -GitHub 表示しているデバイスを自動検出し、bodyや各要素に任意に定義したブレイクポイントごとのclassを付与します。ブレイクポイントはピクセルと解像度、プラットフォームやデバイスの種類や向きの判別にも対応。

ざらっとした紙、ふわっとした布、シックな壁紙、コルク、岩など、シームレスに利用できるパターン素材とテクスチャ素材を紹介します。 Subtle Tile Patterns Vol7 ダウンロードできる素材のフォーマットは2種類。 .png（すぐ使う用） .pat（Photoshopのパターン素材） パターンは全部で8種類、ホワイト系からブラック系まで揃っています。

よく見かけるフリーのアイコン素材だと、アイテム数が少なかったり、フォーマットが限られていたり、ちょっと残念な時がありますが、通常は有料だけど週末まで無料のアイコン素材を紹介します。 アイコンは全部で600種類！ ビジネスやEコマースなどに利用できるベクター素材が今週末まで無料でダウンロードできます。 ダウンロードファイルの一覧 .ai .eps .svg .psd (サイズ：16, 32, 64、カラー：ブラック・ホワイト) .png (透過PNG、サイズ：16, 32, 64、カラー：ブラック・ホワイト) アイコンは一つひとつハンドメイドで全600種類、ビジネスサイト・Eコマース用のさまざまなアイテムに加え、デバイスやお天気や表情なども揃っています。

個人でも商用でも無料で、クレジットの表記義務がない写真画像をPhotoshop上から簡単に選べて、ダウンロードして利用できる機能拡張を紹介します。 画像を探すのにブラウザを開く手間がなくなり、普通に便利です。 SplasHolder 写真画像は全てUnsplashの画像を使っており、画像のライセンスはCC0で個人でも商用でも無料、そしてクレジットの表記義務はありません。 データをひっぱるのにはUnsplash.itのAPIを利用しており、今後これを利用したサービスが増えそうですね。 Photoshop用の機能拡張「SplasHolder」のダウンロードは、下記ページの下の方です。 Photoshopの対応バージョンは、CCです。

作成シーンのアニメーション 中央パネルでグリッドを作成し、左パネルは上からスマホ、タブレット、デスクトップ、ラージデスクトップの表示で、右パネルにはリアルタイムでコードが生成されます。 上部の「Save」ボタンで保存すると、「Preview」ボタンが表示されて実際のページとしてグリッドを表示することもできます。 作成したコードは、Bootstrapのグリッドして利用することができます。

Webサイトやアプリにおけるアクセシビリティについて学んでみたい、そして身につけたい、と考えている人は多いと思います。 「WAI-ARIA」「Web標準」「セマンティック」など、アクセシビリティに関する用語の解説レベルだけでなく、実務ですぐに使える具体的な方法も数多く掲載されたオススメの本を紹介します。 アクセシビリティってこういうことだったんだ！と分かる一冊です。 本書はSmashing Magazineのアクセシビリティ担当：ヘイドン・ピカリング著「Apps For All(2014)」の訳書で、翻訳はBAの太田さんと伊原さんが監修したものです。 BAの二人は、元同僚。 僕が知る中ではアクセシビリティといえば太田さん、太田さんの存在自体がアクセシブルと言ってもいいかもしれません。 そんな造詣が深い太田さんと伊原さん二人の監訳は訳書にありがちなぎこちない日本語ではなく、制作現場の生きた言

一つのカラーを元にそれにあったカラーパレットやグラデーションを作成したり、トレンドカラーを使った配色サンプル、アクセシビリティガイドラインに沿ったカラーパレットなど、配色設計に役立つオンラインツールを紹介します。 Coolors オススメの組み合わせを次々に表示してくれるオンラインサービス。 スペースキーor右のアイコンでランダムカラー、ロックでカラー固定、さまざまなファイル形式にエクスポートもできます。

さまざまなUIを実装するCSSの各プロパティの基礎知識や使い方をはじめ、実装時のスタイルシートの問題点をチェックしたり、重複している箇所を見つけたり、見やすいように整形したり、コードを圧縮・展開したりなど便利なオンラインツール・リソースを紹介します。 CSSのリファレンス・基礎知識系 CSSの調査・分析系 CSSの整形・圧縮・展開系 CSSのリファレンス・基礎知識系

オブジェクトの表面やキャラクターの肌や髪の質感を高めたり、草木や水などを描いたり、抽象的でセンスのある背景、お絵描きやデジタルアート用のアクセントやワンポイントなど、いろいろ使えるPhotoshopのブラシ素材を紹介します。

美しいぼけやブラーを描いたり、写真の背景に目立つようテキストを磨りガラスに載せたり、モザイクやラインを使って幾何学状にしたり、美しい背景をつくるPhotoshopのチュートリアルを紹介します。 各チュートリアルは30分くらいで出来るものなので、ぜひお試しあれ。

マークアップは非常にシンプル、スクリプトの設置も簡単、スマホでもタブレットでもデスクトップでもすいすい快適に操作できる水平スクロールコンテンツを実装できるjQueryのプラグインを紹介します。 デモのアニメーション horizonScroll.jsの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="jquery-1.10.2.js"></script> <script type="text/javascript" src="jquery.horizonScroll.js"></script> </head> スマホなどタッチデバイス対応にする場合は、touchSwipe.jsも加えます。 <head> ... <script type="tex

固定ヘッダ、オフキャンバス、スクロールと連動したちょっとしたアニメーション、コンテンツスライダーなど、最近よく見かけるトレンドを巧みに取り入れたレスポンシブ対応の縦長ページを実装するテンプレートを紹介します。 Bootstrapで、かっこいい縦長ページを作りたいと思ってる人はぴったりです！

最近のUIの傾向として、ユーザーが操作して楽しくなるようなアニメーションは大切なポイントです。そんな気持ちいいCSS3のアニメーションでモーダルウインドウをページ全体に表示するjQueryのプラグインを紹介します。 横からアニメみたいにひゅっとスライドさせたり、ぼい～んとバウンドさせたり、気持ちよくて面白いものが簡単に実装できます。 animatedModal.js animatedModal.js -GitHub animatedModal.jsのデモ animatedModal.jsの使い方 animatedModal.jsのデモ デモでは、3種類のアニメーションを使ったモーダルウインドウを試せます。 アニメーションはanimate.cssを利用しているので、80種類以上のエフェクトが利用できます。 デモページ：Demo 3 In: bounceIn, Out: bounceOut a

Webデザインのセンスをアップさせるには、一つひとつのUIを観察し、考えてからPhotoshopを起動し、作業をすること。最近のトレンドをうまく取り入れたレイアウトや配色・タイポグラフィの参考になるPSDがダウンロードできるUI素材を紹介します。 縦長ページ用のさまざまなコンポーネント、斜めやサークルや幾何学を使ったもの、Material Design、ミニマルなど、参考になるものばかりです。 EventRay UI Kit (PSD) イベントやアクティビティの情報を管理するさまざまなGUIエレメントが揃ったUIキット。情報の取得や通知をはじめ、コメントやフィードバックやシェア、管理や販売などユーザーのインタラクションを容易にするようデザインされています。 Awesome UI Kit for Free (PSD, Sketch, Axure, Omnigraffle) ヘッダ、フッタ、

Bootstrapで実装したページをスマホなどの幅が狭いスクリーンで表示した際に、横からオフキャンバスのナビゲーションをアニメーションでスライド表示させるJSとCSSのパックを紹介します。 Off Canvas -Bootstrap Bootstrap Offcanvasの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプトを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="../dist/css/bootstrap.offcanvas.min.css"/> </head> <body> ... <script src="../dist/js/bootstrap.offcanvas.js"></script> </body> Step 2: HTML まずは、オフキャンバスのナビゲーションを開くボタン。 <butt