XHTML1.0とHTML5の違いをスタバのページで紹介 (1/6)
「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー＆デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き! HTML5マークアップ 現場で使える最短攻略ガイド 定価：2,808円 （本体2,600円）／形態：B5変 (240ページ) ISBN：978-4-04-866070-9 HTML5と従来のHTML4.01やXHTML1.0との違いは、既存のサイトをHTML5化してみると理解しやすいでしょう。今回は、実在するWebサイトをHTML5に（勝手に）リニューアルしながら、HTML 4.01やXHTML 1.0との違いを解説します。ソースコードだけをリニューアルすることは実務ではあまりないと思い
誰も教えてくれない「コンセプト」の作り方 (1/3)
商品のコンセプト、例えば商品の魅力は、モニター上で素敵な言葉をいくら羅列してもなかなか伝わりません。コンセプトは商品や作品の本質そのものなので、言葉にするのは難しいのです。だから私はコンセプトを伝えるシンプルな一言を探します。それが「コンセプトキーワード」です。コンセプトキーワードは特別なものではなく、製品の開発や企画書のタイトルなどさまざまな場面でよく使われる言葉ですが、ここでは「商品の魅力を表現する」キーワードのことを指します。コンセプトキーワードを制作の柱としてコンテンツを作ることで、魅力の本質がユーザーの心に届くようになります。コンセプトキーワードを決めなければ広告作りは先に進まないので、いわば魅力を伝える力の源泉、ご本尊と言えるものです。 前回、サイトマスターはコンセプトをまとめる前に情報収集をすることを書きました。その上で魅力、ターゲット、タイミングを考えるわけですが、今回は魅
Facebook風の無限スクロールが作れるinfinite scroll｜こうめの“これから使える”jQueryプラグイン
圧倒的な人気を誇るJavaScriptのライブラリー「jQuery」。サイトに効果をあたえるプラグインが多数あることが魅力ですが、そのプラグインを探すことがWeb制作者の手間になっています。本連載では、「こうめ」さんこと大竹孔明さんがおすすめのプラグインと実装方法、実装例を紹介します。（編集部） 「infinite scroll」は、スクロールしてページ下部まで移動すると、次のページを自動的に読み込んで表示するjQueryプラグインです。 インフィニティスクロールという機能でTwitterのタイムラインや、Facebookのフィードでも採用されており、ユーザーが手動でページ送りする手間を軽減します。 WordPressのブログ記事や、ECサイトの商品ページ、またギャラリーサイトなどで効果的な表現になりそうですね。 step1 jQueryプラグインの読み込み jQuery本体をjQuery
日本のスマホサイトは2年間でこんなに変わった (1/4)
スマートフォンやタブレット端末といった、いわゆる「スマートデバイス」を意識したWebサイト制作はもはや常識となっている。各企業のWebサイトは、次のような方法でスマートデバイスに対応していることがほとんどだろう。 スマートフォン向け専用サイトを構築する レスポンシブWebデザインで Webサイトを構築する viewportを調整する Web Professionalでは、2011年2月、有名企業のWebサイトがスマートフォンにどのように対応しているかを紹介した。 これらのサイトは、2年経ってどのような変化を遂げたのか。本記事では、取り上げたサイトに再び訪れ、サイトデザインのトレンドがどう移り変わったのかを観察。日本のスマホサイトの「BEFORE & AFTER」を紹介しよう。 半数以上のサイトがリニューアル まず、調査したサイト数に対してリニューアルしたサイトと、大きくは変化していないサイ
超簡単！人物のポーズを40秒で変えるPhotoshop便利機能
初校の直しも終わったし、あとはクライアントの最終チェックを待つのみ。そろそろ入稿の準備でも……と思ったら、「う〜ん、この写真、もうちょっとダイナミックな感じ、躍動感がほしいんだよねぇ」って、スタジオでも初校でもこれでOKって言ったじゃないですか!! 「フォトショでさ、チャチャってできるでしょ」って、空頼みですか。 でも、実はできちゃうんです！ Photoshop CS5から搭載された新機能「パペットワープ」で、人物のポーズも自在に変更できます。 以下はそのムービー。 変化が分かりやすいように、最初に元画像を薄く下に敷いています。右下は、作業中のマウス、キーボード操作画面、右上は経過時間です。40秒といっても、待ち時間が結構あります
レスポンシブWebデザインとは (1/5)
スマートフォンやタブレット、PCなどあらゆるデバイスに対応する制作手法として注目されている「レスポンシブWebデザイン」。レスポンシブWebデザインの概念からサイト制作の基本まで、レスポンシブWebデザインによる制作案件を数多くこなす菊池 崇氏が解説します。（編集部） 本連載で紹介したレスポンシブWebデザインの基礎に加えて、画像や動画のレスポンシブ対応、パフォーマンス改善といった商用サイト構築のノウハウを大幅に加筆。さらに、解像度に依存しないレスポンシブWebデザインの考え方やスマートテレビ対応などの応用テクも盛り込みました。 レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック 定価：2,625円 (本体2,500円)／形態：B5変 (232ページ) ISBN：978-4-04-886323-0 レスポンシブWebデザイン（Responsive Web Design）
メディアクエリーの設定とグリッドデザインの導入 (1/3)
本連載で紹介したレスポンシブWebデザインの基礎に加えて、画像や動画のレスポンシブ対応、パフォーマンス改善といった商用サイト構築のノウハウを大幅に加筆。さらに、解像度に依存しないレスポンシブWebデザインの考え方やスマートテレビ対応などの応用テクも盛り込みました。 レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック 定価：2,625円 (本体2,500円)／形態：B5変 (232ページ) ISBN：978-4-04-886323-0 前回までで幅320pxの画面を基準としたCSSが完成しました。今回は、タブレットやデスクトップなどの大きなスクリーンでも閲覧しやすいように、メディアクエリーを使ってCSSを切り替えるようにします。また、大画面用のレイアウトのためにグリッドデザインの考え方も導入します。 レスポンシブWebデザインでは、「メディアクエリー」を使って画面幅に応じ
前年比144％で急成長、JINS大躍進の秘密とは？ (1/3)
便利なネット通販でも、「これだけは売れないだろう」と思われていた「メガネ」という商材で大躍進しているのがJINS（ジンズ）だ。レンズの度数や、フレームのフィッティングなど、「実際に使って（試着して）みなければ分からない」部分を、いかにして“再現”できたのか。同社のアイデアや、具体的な施策について聞いた。（編集部） 便利なネット通販でも、「これだけは売れないだろう」と思われていた「メガネ」という商材で大躍進しているのがJINS（ジンズ）だ。レンズの度数や、フレームのフィッティングなど、「実際に使って（試着して）みなければ分からない」部分を、いかにして“再現”できたのか。同社のアイデアや、具体的な施策について聞いた。（編集部）
本店と楽天を使い分け、ブランディングを強化 (1/2)
2007年、革小物販売『Cカンパニー』の店主・佐藤明美さんは、楽天市場に再出店してみて、改めて、本店（独自ドメイン）との違いを実感した。 「楽天市場は、広告費をかければ必ず結果がついてきます。これはつまり、お客さまに呼び込みをかける“攻め”の姿勢がなければ売り上げは見込めないということです。一方、本店の方は、お客さまがキーワードを検索して来店するのを“待つ”ことが多いです。SEO対策を万全にしたら、あとは、広告費のかけどころはあまりないんですよね」 そこで佐藤さんは、両者それぞれの特性を生かした販促を考えていった。すなわち、楽天市場では広告に力を入れて新規顧客を開拓し、本店では、新商品を発売する、イベントを開催するなどのタイミングでメルマガを発行し、リピーター客へのサービスに努めたのだ。 楽天市場は、広告をフルに活用して集客アップ 楽天市場では、ECコンサルタントと相談しながら、粗利の10
SEOにも効果的なWebライティングとは
テキストがコンテンツの中心になるWebサイトでは、Webに特化した文章を書く技術が求められます。こうした技術を「Webライティング」と呼びます。 文章はライターが用意する場合もありますが、Webディレクターが書くこともあります。また、ライターが執筆した原稿に問題があれば、ディレクターが編集したり、修正を指示したりする場合もあります。 Webサイトの文章には、内容の訴求はもとより、ユーザビリティやアクセシビリティ、Web標準への対応、SEO対策といった役割があります。そのため、ライターに作業を任せる場合も、ディレクターが内容や構成・文字数などを的確に指示することが必要です。Webライティングの基本は「誰にでも分かりやすい文章にする」ことであり、それが多くの課題の解決にもなります。 文章の構造を考えると分かりやすさが見えてくる Webライティングでは、まず最初に構成（アウトライン）を決めるとよ
foursquareは何を起こしているのか？――foursquare入門 (1/3)
【今週の1枚】foursquareのチェックイン数で世界第2位の駅に輝いた渋谷駅。アプリが日本語化される前から、渋谷を行き交う人々が駅にチェックインしており、朝は50人を超えるユーザーのチェックインと出会える 2011年2月9日に、KDDIはアメリカのFoursquare Labとの間で、日本での「foursquare」の展開で協力関係を結ぶことを発表した。また2月14日にはfoursquareのiPhoneアプリの日本語化もなされている。さて、この「foursquare」は一体どんなサービスなのか。そして日本での展開はどう広まっていくのだろうか。 世界中、さらには宇宙でも使われた「foursquare」 foursquareはスマートフォンでの位置情報を用いたソーシャルメディアと呼ぶべきサービスだ。BlackBerry／iPhone／AndroidといったGPSを搭載した主要スマートフォ
諸君！革命的美人ブロガー安全ちゃんに刮目せよ！ (1/5)
安全ちゃんは、「革命的オリーブ少女主義者同盟演説」や「共産主義的煮込みをつくろう！！」など、ファッションや料理に政治思想を融合した奇抜すぎるタイトルのコンテンツで注目を集めているブロガー（自称「貧困ガール」）だ。 単にネーミングセンスがユニークなだけでなく、豊富な知識と考察に裏打ちされた硬派なテキストを散りばめながらキャッチーな素材をテンポよく紹介するという、難易度の高い仕事をハイレベルに仕上げる腕が彼女の神髄といえる。 徹底的に練り込んだ個性的な文章から、ブログ「安全ちゃんオルグ日記」は、年間10本に満たない年もあるほど更新頻度が低いが、記事がアップされるたびに話題を呼ぶようになった。更新頻度の高さが重要なカギとなるブログメディアとしては、人気の保ち方が異例といえる。 顔の見えるインターネット 第94回は、そんな安全ちゃんの思考回路とその奥にある狙いを探ってみたい。 安全ちゃんオルグ日記
iframe対応！初めてのFacebookページの作り方 (1/4)
Facebookを企業で活用するために、Facebookページの開設・運用方法を解説する本連載。第1回では、Facebookページの概要と基本的な機能について、事例を挙げながら紹介しました。今回はASCII.jp Web ProfessionalのFacebookページを例にとって、Facebookページの作成方法を具体的に解説しましょう。 さっそくですが、完成したWeb ProfessionalのFacebookページを紹介します。 Web Professional編集部では、「固定読者を育てることで媒体価値をアップさせる」ことを目的にFacebookページを開設しました。「いいね！」をしてくれたユーザー（ファン）に対して、ニュースフィードを通じて最新情報を提供し、ウォールによる記事へのフォードバックや、ファンの友人を通じた潜在的な読者へのリーチも狙います。Web Professiona
保存版！Facebookでファンを獲得する18の鉄則 (1/4)
Facebookを企業で活用するために、Facebookページの開設・運用方法を解説する本連載。前回までは、Web ProfessionalのFacebookページを例に、Facebookページのカスタマイズ方法を紹介しました。すでに記事を読んで、実際にFacebookページを作ってみた、という方もいらっしゃるかもしれません。 ところが、Facebookページを作ってはみたものの、なかなか「いいね！」してもらえず、ファンが増えない。そんな悩みはありませんか？ Facebookページさえ作れば、ファンは来てくれる――多くのFacebookページ運営者の願いですが、ファンはFacebookの霧の中から沸いてくるものではありませんし、ページを作っただけで魔法のように増えるわけではありません。 今回は、Facebookページを多くのユーザーに「いいね！」してもらい、ファンを獲得する方法を紹介します
絶対見ておきたい有名企業のスマホサイトまとめ (1/5)
この記事で取り上げているスマートフォンサイトの「BEFORE & AFTER」を以下の記事で紹介しています。合わせてご覧ください。 日本のスマホサイトは2年間でこんなに変わった iPhone、Androidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」（スマホサイト）を開設する企業が増えている。当初はiPhone（iOS）の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。 ここでは、Web制作者が見ておきたいスマートフォンサイトを紹介する。実務で参考にできるように、対象を日本語の企業サイトに絞り、業種別に分類してまとめた。スマートフォンサイトの制作に入る前にチェックしておこう。
美人すぎる理系アーティスト・スプツニ子さんはなぜ歌う？ (9/9)
■ Laurie Anderson - Big Science (1982) まずはスプツニ子の尊敬するアーティスト、ローリー・アンダーソンのデビューアルバムから。2005年に初台ICCギャラリーで彼女の回顧展を見て衝撃を受けて以来、音楽はもちろん社会的メッセージ性や彼女の創る独特の世界観にスプ子作品は多大な影響を受けています。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
黒川紀章がThinkPadを語る！――「早く人間に追いついてみろ！」 (1/2)
アディダスに学ぶ「気持ちいい」サイトを作る4つのしかけ
小池 勉の「企業サイト成功の法則」
マンガ：Webディレクター 江口明日香が行く