HTML や CSS のタグやプロパティをすべて記憶することはベテランのデザイナーでも難しいものです。しかし、わからないタグやプロパティなどをいちいち検索して調べていると開発に時間がかかってしまいます。そんなときに役立つのがチートシートです。 チートシートを使えば素早く目的のものを見つけ、より効率的な開発を行うことができます。今回は Web 制作を行うときによく使う HTML、CSS、Bootstrap、WordPress、ツールに関するものを紹介します。 HTML HTML5 Cheat Sheet ダウンロードページ HTML5 のタグがまとめられているチートシートです。すべてのタグが簡潔にまとめられており、非常に見やすいです。 The HTML 5 Mega Cheat Sheet ダウンロードページ こちらも HTML5 のタグをまとめたチートシートです。ブラウザ対応、廃止されたタ

Google アナリティクス初心者のために、基本的な分析の考え方、Google AdWords連携、Google タグマネージャの活用方法を紹介する本連載。前回は、Googleタグマネージャ（以下GTM）のメリットと、その設定方法を解説しました。今回は、GTMの導入で簡単に設定できる「イベントトラッキング」の解説と活用方法、GTMでの設定方法をふまえて、GTMの仕組みを紹介します。 「イベントトラッキング」とは？ その名前の通り、「イベント＝何が起こったのか」を計測できるGoogle アナリティクスの機能です。Google アナリティクスはユーザーがサイト内で、「どのページからどのページヘと遷移していくのか」を把握しますが、イベントトラッキングを設定すると、「それぞれのページ内でユーザーが何をしたのか」という行動を計測できるようになります。 Google アナリティクスでもイベントトラッキ

特にレスポンシブやスマホサイトで見かけることが多い、どんなウィンドウサイズでも縦横比を維持しつつ横幅いっぱいに画像を表示している見栄えですが、imgであれば画像を配置してwidth:100%;とheight:auto;辺りを指定しておけば簡単に表示させることができても、その見栄えを背景画像を利用してとなると先述した方法では実装できません。 背景画像でも同じように縦横比を維持しつつ横幅いっぱいに画像（背景画像）を表示させたいときは以下の方法で実装することができます。 実装には背景画像を表示したい部分に下記のようなCSSを記述することで縦横比を維持しつつ横幅いっぱいに背景画像を表示させることができ、以下のサンプルは表示させたい画像が「横幅：1000px　高さ：300px」の画像だった場合のものになります。 .background { width: 100%; height: 0; paddin

こうしてまとめてみると、PhotoshopよりIllustrator寄りの機能になっているような気がします。 デザインモードはここが便利！ すごい数のアートボードになっても重くならない 公式の紹介動画をみていた際、アートボードの数が増えてもパフォーマンスが落ちないという解説がありました。 あやしい… というわけで、試しに50ほどアートボードを並べて可愛い柴犬で画面を埋めてみました。 この状態で編集や移動、拡縮を繰り返しても重い印象はなくスムーズ。 PhotoshopやIllustratorだと、10前後でじわじわ重くなってきてヒーッ！となっていたのですが、それに比べれば断然スムーズです。 疑ってすみませんでした！ ただ、まだ機能が少ない分軽い可能性も。 今後バージョンアップしても変わらないことを祈ります。 画像のマスクや差し替えが簡単すぎる Adobe XDでは、とても簡単に画像のマスクや

※この記事は2016年3月8日時点で執筆された記事です。現在では仕様が異なる可能性があります。 faviconって何？どのサイズまで用意すればいいの？Windowsのカスタムタイルって？Androidでうまく映らないんだけど？ 単純なように見えて調べだすときりがないfaviconについて、基礎知識から説明いたします。 目次 favicon（ファビコン）とは？ faviconファイルの基礎知識 どのサイズを用意すればいいの？ 透過・非透過などデザイン時の注意点 Android対応の注意点 favicon実装確認の注意点 favicon.icoファイルの作りかた まとめ favicon（ファビコン）とは？ faviconとはfavorite iconの略で、主にブラウザのタブや履歴、お気に入りに表示されるアイコンや、スマホでサイトをホーム画面に置いたときの表示アイコンなどのことを指します。 ほ

この連載ではこれまで15回にわたり、エントリーフォームの完了率を上げるための考え方や改善ノウハウについて取り上げてきました。 今回は連載の「おまけ」として、これから新たにエントリーフォーム改善に取り組もうというWeb担当者を対象に、エントリーフォーム改善施策の提案書をどのように作成すべきか、提案書の構成や作成時のポイントを紹介します。 過去の連載は、こちら → http://web-tan.forum.impressrd.jp/e/2014/02/28/16995 EFO（エントリーフォーム最適化）とは？提案書について紹介する前に、EFO（エントリーフォーム最適化）についておさらいしておきましょう。もはや言うまでもありませんが、エントリーフォーム最適化は、エントリーフォームの完了率を上げるための施策全般を指します。 メルマガ登録フォーム資料ダウンロードフォーム資料請求フォームメンバー登録フ

どうも、まさとらん（@0310lan）です。 みなさんは、「JavaScriptライブラリ」を活用しているでしょうか？ Webサイト制作はもちろんのこと、さまざまなWebアプリやサービスなどを開発する時に、大幅な時間短縮やクオリティを飛躍的にアップすることが出来るようになります。 そこで今回は、国内外で人気が高くて誰でも簡単に扱える「JavaScriptライブラリ」を厳選してご紹介しようと思います！ ■多機能な「写真ギャラリー」を組み込めるライブラリ！ ◆1.Viewer.js 複数の画像を表示する際に、オシャレな「ギャラリー風」に変換してくれるライブラリです。 類似のライブラリはいくつか存在しますが、「Viewer.js」は使い方が非常にシンプルで扱いやすいのに、多機能性も備えているスグレモノとなっています。 基本的な使い方としては、HTMLファイルに表示させたい画像を「リスト要素」で指

「TCD Google Maps」でこんなことが出来ます！ デザインが豊富に揃っている（Discreet,Flat pale,Ultra lightなど全10タイプ） ショートコードで記事中に簡単に表示できる 住所を入力するだけで表示 縦・横サイズ・ズームの調整機能 ボーダーの表示、非表示 中央表示の選択 TCD GoogleMapプラグインのインストール 管理画面から「TCD」を検索してインストールして下さい。 もしくは、下記のボタンからプラグインをダウンロードし、「プラグイン」→「新規追加」→「プラグインのアップロード」よりwp-content/pluginsディレクトリにインストールし、有効化してください。 TCD Google Maps TCD Google Mapsプラグインの設定方法 解説動画もアップしておりますので、よろしければどうぞ。 プラグインを有効化すると、設定画面に「

NameBright.com - Next Generation Domain Registration socialmedia-rex.com is coming soon

たくさんあるWeb制作会社。1,000人以上のプロダクションから、フリーランスのクリエイターまで選択肢は様々です。 数多くある中から、目的にハマッたWeb制作会社をどのように見つければ良いのでしょうか？以下の方法をご紹介します。 1.Web制作会社年鑑を活用する 2.Webクリエイター向けの求人サイトを活用する 3.ポートフォリオサイトを活用する 4.クライアント側に直接聞いてみる 5.メディアやアワード、団体などを参考にする 1.Web制作会社年鑑を活用する http://www.weblab.co.jp より マイナビさんから出版されている『Web制作会社年鑑』では、大小様々なWeb制作会社が100社以上掲載されています。 実績一覧はもちろんのこと、従業員数や、受注額の目安、所在地などもわかりやすく記載されているので、「Web制作会社年鑑で探しています」という方は多いかと思います。 「

はい、メディアディレクターののぐさんです。 今年のクリスマスケーキは何にしようかと悩んでいる今日この頃です。セブン-イレブンのケーキ、イオンのケーキ、近くのケーキ屋さんのケーキ。うーん、悩みます。 どこに注文しようか。ケーキを何にしようか。まずは情報収集してから決めようと思います。そう、「検索」で。 検索すると必ずと言っていいほど、上部と右側に広告が出てきますよね。「リスティング広告」っていうやつです。なにか調べたいキーワードをYahoo!やGoogleで検索したとき、そのキーワードに応じて検索結果画面に表示される広告のことです。 リスティング広告って誰でもできるけど、片手間ではできない仕事です。それっぽいキーワードを選定して、広告文を作ればいいというわけではありません。 プロの広告運用者は、必ず意図を持ってキーワードを選定し、キーワードと親和性を持たせた広告文を作成していきます。ターゲッ

DXディライトは、見込み客の獲得から顧客化、受注後の業務フローの構築など、Salesfoceを中核にあらゆる部門の業務環境・フローの構築をご提案いたします。Salesforceの認定パートナー。

こんにちは、ディレクターのあゆみです。 「業界とは……？」とつっこみたくなるのであまり「業界トーク」は好きじゃないのですが、Web業界はやっぱり変化速度が無茶苦茶早いなあと実感しています。技術の進化もめまぐるしいですし、常に新しい情報が行き交っています。「こうやるといい」というセオリーはなかなかなくて、絶えずトライ＆エラーをしているというのが、流れの真っ只中にいてひしひしと感じていることです。 「ここまでいったら一人前」という基準値はあるはずもないんですが、最近、特に感じていることがあります。 テクニカルディレクターという職種の重要性 見出しの通り、「テクニカルディレクターという職種の重要性」を前以上に感じるようになりました（と思いませんか？　少なくともわたしの周りではよく聞くようになりました）。 テクニカルディレクターとは、プロジェクトのシステム要件の定義や提案、技術面でのサポートを行う

はじめまして、ワンフットシーバスの田中正吾です。 普段はフリーランスのフロントエンドエンジニアとして活動しております。Webでのインタラクションを中心に制作していますが、デジタルサイネージの制作に関わることもあります。その流れから、最近はリアルとつながるIoTに興味があり、その中でも気軽にIoTのプロトタイプが作れる「littleBits」が好きでよく使っています。（littleBits：電子回路を学べるオープンソースライブラリー） そこで今回、littleBitsの「MAKEY MAKEY」というモジュールをどのように動かしたか、実装のときにわかったTIPSをご紹介いたします。 「すしインタラクティブ」とは？ littleBitsについてご紹介する前に、まずは今回解説に使う「すしインタラクティブ」についてご説明しましょう。こちらは左手で手パーツを触り、右手で寿司を醤油につけると、モニター

こんにちは、株式会社アッションの小林です。 全3回の「失敗しないためのA/BテストやLPOのやり方シリーズ」第2弾です。 A/Bテスト・LPOシリーズ なぜ失敗する？A/Bテストの運用が上手くいかない企業の共通点 A/Bテストを成功させるためのフレームワーク【3W2H】 A/Bテストツール「VWO」の隠れた機能とは？使い方の実例公開 A/Bテストを成功させるために、最も重要なこと。 それは、“効果的なテストアイデアを考案すること”に他なりません。 テストのアイデア出しは勘でおこなっている 1回目のテストは好調だったが、2回、3回目となるとうまくいかない 自信を持って自分のテストアイデアに効果がある！と言い切れない など、根拠ある数字や考え方を元に効果的なテストアイデアを考案することがなかなかできないものです。 そこで今回は、そんな方のために自信を持ってテストアイデアを作成できる手順をご紹介

こんにちは！　ソウルドアウトのはつざわです。 「なんでこのかばんがこんなに高いの！？」。有名ブランドショップで商品の価格を見たことがある人なら、一度は感じたことがあるのではないでしょうか。一見安そうに見えても、実は商品の価格は予想以上。それでも売れてゆくのは「ブランド」の力が大きく働いています。 ただこの力、一部の超有名企業に限られたものではありません。Webサイトをしっかり設計すれば、サイトの大小にかかわらず、そのサイトだけの「ブランド」を確立することができます。 今回はそんな「ブランド」の作り方について、具体的な方法を9つのポイントに絞ってまとめてみました。最後まで目を通していただければ、超一流ブランドにも負けない自信が持てるかも！？　事例とともに紹介していきますので、ぜひチェックしてみてください。 ブログ開始約4ヶ月半で累計50万PVを突破した「LISKUL」 Webというプラットフ

コンセプトは「現場で使える、実践的なCSS設計」です。 以下のようなポイントに当てはまる方は、ぜひ手にとってみてください。m(_ _)m CSS設計を勉強したいとは思ってるけど、まだ本格的には動いていない CSS設計の理屈はわかったけど、いざ実務でやると上手くいかない SMACSSとかBEMとか方法論がいろいろありすぎて、どれをどう使えばいいのかわからない CSSを設計する意義がわからない CSS設計を実務に導入したいけど、絶対に失敗したくない ということで広告はこれくらいにして、本題に入りたいと思いますっ。 1. ドキュメントがない 複数人で開発を行う場合、ドキュメントがないとコーディングルールをはじめとするさまざまなお約束事項をメンバー間で共有することができません。 その結果、命名規則が守られなくなったり、CSSの書き方がバラバラになったりと、設計がみるみる内に崩れていくでしょう。。。