GoogleアナリティクスをChromeで動作確認
Web制作の「時短」に役立つChromeデベロッパーツールの活用法を紹介する本連載。第5回は、 Web解析ツールとしてよく使われるGoogleアナリティクスについての悩みを解決します。 Googleアナリティクスのイベントが正しく送信されているのか確認したい Web解析ツール「Googleアナリティクス」の機能に、ボタンを押した時など任意のタイミングで独自の指標を取得できる「イベント トラッキング」があります。便利な反面、イベント トラッキングを利用するには、トラッキングコードのカスタマイズが必要です。 設定をしても、Googleアナリティクスのレポートで数値を確認するまでイベントデータが送出できているか確認できずストレスを感じたり、意図する数値がレポートに表示されない原因を特定できず、時間を無駄にしたりすることがあります。
１限目：コピーライターに学ぶ、書くための「レシピ」 (1/2)
僕はコピーライターです。日ごろ、書く専門家として、広告代理店や制作会社、企業の方々から依頼を受け、コピーやテキストを書くのが僕の仕事です。また、セミナーや研修でライティングを教えることもあります。そんな僕がこれまでの仕事を通して感じてきたのが、“書かずギライ”の存在です。“書かずギライ”の方たちはこう言います。「おれ、文才ないからなあ」「どうも書くことが苦手で」と。 しかし、そんなことをおっしゃる方々も、その実、非常に優秀な方ばかりで、デザイン、プログラミング、マネージメント、マーケティングといった、ご自分の専門分野では非常に優れた能力を発揮していたりします。もう、提案したり教えたりする僕が劣等感にさいなまれるほどに、です。 で、僕は考えました。“書かずギライ”の正体、それは“自分が書いたもののクオリティが判断できない状態”なのではないか……と。デザインやプログラムと違って、善し悪しの判定
JavaScriptで振り分けてスマホサイト完成！ (1/5)
スマートフォンサイトの設計・デザイン、HTML5+CSS3による基本的なマークアップについて前回までに解説してきました。今回はページ内の要素にリンクを設定してスマートフォンサイトを仕上げます。 ページ内リンクを張る 今回制作しているスマートフォンサイトは、ページ内の各コーナーに移動できるナビゲーション（ジャンプボタン）を設置しています。まずはジャンプボタンにページ内リンクを設定しましょう。ページ内リンクは、PCサイトと同様、リンク先の要素にID属性を振り、a要素を次のように記述します。 <ul class="clearfix"> <li><a href="#access">アクセス</a></li> <li><a href="#tel">電話</a></li> <li><a href="#mail">メール</a></li> </ul> ボタン全体にリンクを貼る ページ内リンクを設定したサ
Webデザインが3倍速くなる！Photoshop神速テク4つ
カンプのデザインやパーツの作成など、Webデザインにも欠かせないPhotoshop。もっとラクに、もっと速くWebデザインするために、すぐに役立つ4つの時短テクニックを紹介します。 サイズ違いのバナーはまとめて使い回し Photoshopでよく作るモノの1つといえば、バナー。掲載場所や配信先によってサイズが異なるバナーをバラバラに作成すると使い回しが面倒だし、写真や文言に変更があったときにいちいち直すのが大変ですよね。 いろんなサイズのバナーを1つのPhotoshopファイルにまとめて作成し、写真やロゴをスマートオブジェクトで一元化しておくと、バリエーションをスピーディに作れ、修正にも対応しやすくなります。 例として、大中小の3つのバナーを一気に作ってみましょう。作成する最大サイズのバナーが収まるように新規ドキュメントを作成し、大きいサイズのバナーから作成します。 レイヤーに素材を配置して
こうめの“これから使える”jQueryプラグイン
圧倒的な人気を誇るJavaScriptのライブラリー「jQuery」。サイトに効果をあたえるプラグインが多数あることが魅力ですが、そのプラグインを探すことがWeb制作者の手間になっています。本連載では、「こうめ」さんこと大竹孔明さんがおすすめのプラグインと実装方法、実装例を紹介します。
日本のスマホサイトは2年間でこんなに変わった (1/4)
スマートフォンやタブレット端末といった、いわゆる「スマートデバイス」を意識したWebサイト制作はもはや常識となっている。各企業のWebサイトは、次のような方法でスマートデバイスに対応していることがほとんどだろう。 スマートフォン向け専用サイトを構築する レスポンシブWebデザインで Webサイトを構築する viewportを調整する Web Professionalでは、2011年2月、有名企業のWebサイトがスマートフォンにどのように対応しているかを紹介した。 これらのサイトは、2年経ってどのような変化を遂げたのか。本記事では、取り上げたサイトに再び訪れ、サイトデザインのトレンドがどう移り変わったのかを観察。日本のスマホサイトの「BEFORE & AFTER」を紹介しよう。 半数以上のサイトがリニューアル まず、調査したサイト数に対してリニューアルしたサイトと、大きくは変化していないサイ
ゴールのないサイトでもコンバージョンを測る方法 (1/2)
「ECサイトは明確なコンバージョンがあるので分析しやすそう」という声をよく聞きます。購入や会員登録、資料請求のような明確なゴールが無いサイトではアクセス解析ツールのコンバージョン機能を設定していないことが多いですが、実は立派なコンバージョンがあるのを忘れていませんか？ 「ゴール」「アクション」「コンバージョン」などと考えず、サイトに訪問してくれた人に「どうなってもらいたいのか？」と考えてみましょう。「二度と来ないで欲しい」と思ってサイトを運営している人はいないはず。そこで、今回は素直に「また来て欲しい」という想いが叶ったのかどうかをゴールとして計測する方法について考えてみます。 知るべきことを知る まず、知りたい訪問者の行動を図解しつつ、「また来る」ことは訪問者と運営側にとって何を意味するのかを整理してみましょう。 ユーザーは何かをきっかけとして、検索やソーシャル経由でサイトを訪問します。
スマホサイトを作る前に見たい国内38社の実例 (1/7)
この記事で取り上げているスマートフォンサイトの「BEFORE & AFTER」を以下の記事で紹介しています。合わせてご覧ください。 日本のスマホサイトは2年間でこんなに変わった iPhone、Androidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」（スマホサイト）を開設する企業が増えている。当初はiPhone（iOS）の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。 好評だった前編に引き続き、Web制作者が見ておきたいスマートフォンサイト（日本語／企業サイト限定）を業種別に分類して紹介する。スマートフォンサイトの制作に入る前にチェックしておこう。
諸君！革命的美人ブロガー安全ちゃんに刮目せよ！ (1/5)
安全ちゃんは、「革命的オリーブ少女主義者同盟演説」や「共産主義的煮込みをつくろう！！」など、ファッションや料理に政治思想を融合した奇抜すぎるタイトルのコンテンツで注目を集めているブロガー（自称「貧困ガール」）だ。 単にネーミングセンスがユニークなだけでなく、豊富な知識と考察に裏打ちされた硬派なテキストを散りばめながらキャッチーな素材をテンポよく紹介するという、難易度の高い仕事をハイレベルに仕上げる腕が彼女の神髄といえる。 徹底的に練り込んだ個性的な文章から、ブログ「安全ちゃんオルグ日記」は、年間10本に満たない年もあるほど更新頻度が低いが、記事がアップされるたびに話題を呼ぶようになった。更新頻度の高さが重要なカギとなるブログメディアとしては、人気の保ち方が異例といえる。 顔の見えるインターネット 第94回は、そんな安全ちゃんの思考回路とその奥にある狙いを探ってみたい。 安全ちゃんオルグ日記
ASCII.jp：Facebookページの作り方、教えます｜今日からできるFacebookファンページ制作＆運用ガイド
ローソン、無印良品、リクルート――世界6億人ものユーザーを抱える巨大SNS「Facebook」の日本での本格的なブレイクを前に、ファンページを開設する企業が相次いでいます。しかし、国内でのFacebookの企業活用はまだ始まったばかりで、実際にどのようにしてFacebookページ（ファンページ）を作り、運用したらよいのか？ 多くの企業が手探りの段階です。 本連載では、Facebookページの作成を請け負うWeb制作会社「TAM」の加藤 洋氏が、Facebookページの開設からカスタマイズ、ファンを獲得する方法まで、Facebook活用の具体的なノウハウをシェアします。（編集部） なぜいまFacebookなのか？ 私が勤務するTAMでは、Facebookをはじめとするソーシャルメディアの活用を企業へ積極的に提案しています。お話する中で必ず出るのが、「Facebookが他のSNSと何が違うのか
絶対見ておきたい有名企業のスマホサイトまとめ (1/5)
この記事で取り上げているスマートフォンサイトの「BEFORE & AFTER」を以下の記事で紹介しています。合わせてご覧ください。 日本のスマホサイトは2年間でこんなに変わった iPhone、Androidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」（スマホサイト）を開設する企業が増えている。当初はiPhone（iOS）の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。 ここでは、Web制作者が見ておきたいスマートフォンサイトを紹介する。実務で参考にできるように、対象を日本語の企業サイトに絞り、業種別に分類してまとめた。スマートフォンサイトの制作に入る前にチェックしておこう。
Kindle/iPad対応！電子書籍の作り方 (1/7)
iPadの上陸、Googleの参入などで盛り上がる電子書籍市場。「Webに近い」性質を持つ電子書籍は、Web制作の世界とも決して無縁ではありません。本連載では、「JavaScriptラボ」でおなじみの古籏一浩氏が、主な電子書籍フォーマットのデータの作成方法を解説します。（編集部） 電子書籍にはPDF、EPUB、.book、AZW/MOBI、Topaz、XMDFなどさまざまなフォーマットがありますが、どのフォーマットがどんなコンテンツに適しているのか、どのような方法でデータを作成できるのか、電子書籍の課題や現実のワークフローは実際にデータの作成を体験することで見えてきます。そこで、本連載では現時点で広く使われている（もしくは仕様が公開されている）4つの電子書籍フォーマットについて、データの作り方を解説します。
ぼくはまちちゃん！ こんにちはこんにちは!! (1/5)
古くからのmixiユーザーであれば、“はまちちゃん事件”を覚えている人も多いだろう。2005年4月、mixiで大勢のユーザーが“ぼくはまちちゃん！”というタイトルを付けた、謎の日記を次々に公開するという怪現象が起こった。 きっかけとなったのは、あるユーザーが投稿した日記。その日記の本文には「こんにちはこんにちは!!」という言葉とともに“あるURL”が貼り付けてあった。 このURLが罠で、不思議に思って押すと、クリックしたユーザーのページに“ぼくはまちちゃん！”というタイトルで同じ文面/URLの日記が勝手にアップされてしまうのだ。 投稿は“ねずみ算”的に増え、一時は混乱状態に…… さらに、勝手にアップロードされた日記を見て「友達が変な日記を書いている」と興味を持った友達がURLをクリック……。mixi内には“ぼくはまちちゃん！”という題名の日記が“ねずみ算式”に増えていき、一部のユーザーを混
MacBook Proで「デュアルモニター」環境を構築！ (1/2)
13インチMacBook Proといえば、均整なアルミのボディーに、デジタルライフを楽しむための機能をギュっと詰め込んだプロダクト。国内でも人気が高くて、「初めてのMac」として選ぶ人も多いです（Apple Storeで見る）。 本連載「目指せ快適！ MacBook Pro長期レビュー」では、本体の見所や合わせて使うと便利な周辺機器、覚えておくと便利なソフトの設定方法など、MacBook Proをより楽しく使うための情報を提供していきます（第1回はこちら）。 今回は「デュアルディスプレー環境」をテーマとして取りあげる。13インチのグレア液晶は1人の作業には十分としても、会議の参加者に見せるためにプロジェクターに出力したい、Spacesの仮想空間ではなく物理的に広いデスクトップで作業したい、というニーズもあるはず。 MacBook Proの場合、外部ディスプレーへ出力するとなると、本体左側面
HTMLもCSSも書換不要！気持ちいいスクロール (1/5)
Webサイトを作るにあたって、ネット上でデザインの参考になるサイトを探していると、プロのWebデザイナーのポートフォリオサイトに行き当たることがあります。ポートフォリオサイトはデザイナーにとってのショーケース。気合の入った作りや実験的な要素を盛り込んでいるサイトもあり、単純に眺めても楽しいものです。 今回取り上げるサイト「Cosmive」は、Webデザイナー・Muhammad Uzairさんのポートフォリオサイト。色鮮やかで美しいグラフィックに、JavaScriptによるダイナミックなユーザーインターフェイスを合わせています。今回はこのサイトから参考にさせてもらいましょう。 今回のお手本サイト：『Cosmive』 パキスタン在住のWebデザイナー、Muhammad Uzairさんのポートフォリオサイト。自身のプロフィール、手がけた作品の紹介、問い合わせフォームまで、1ページにコンパクトにま
完全保存版・MacにWindows 7をインストールしよう (1/5)
1月19日、アップルはWindows 7対応の「Boot Camp 3.1」を公開した。もともと2009年中のリリースを予定していたため、首を長くして待ち望んでいたユーザーも多いことだろう。 このアップデートではWindows 7に正式対応したほか、トラックパッド使用時に起こる問題などが解決されており、すべてのBoot Campユーザーに更新を推奨している。 すでにBoot Camp 3.0を使用しているユーザーはBoot Campドライバーのみを更新すればいい（「Boot Campドライバーの更新」を参照）。Boot Camp 2.2以前の環境を3.1に更新することはできないため、Windows７を使用するにはSnow Leopard付属のBoot Camp 3.0の導入が前提となる。 なお、Boot Camp 3.1自体はIntel製CPUを搭載したすべてのMacに対応しているが、一部
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ゼロから始めるレスポンシブWebデザイン入門
浜 俊太朗のHTML5マークアップ移行ガイド
実践！iPhone＆Androidサイト制作ガイド
マンガ：Webディレクター 江口明日香が行く
