こんにちは。 livedoor Blogを担当しています石野と申します。 前職はマークアップエンジニア(HTMLコーダー)をしていました。 今回はその経験を踏まえ、ディレクターとして把握しておいた方が良いHTML/CSS関連のお話をご紹介しようと思います。 昨年からHTML5、CSS3、そしてInternet Explorer(以下IE)8のベータ2版発表と、バージョンアップに関するニュースが相次ぎました。 その違いを認識する上でも、また制作サイドのディレクションに活かす上でも本エントリーを参考にしてください。 ▼ 構成 (1) HTML - 文書型について (2) HTML+CSS - クロスブラウザについて (1) 文書型について - ファイルの先頭に陣取っている「DOCTYPE」とは何か？ HTMLソースを開くと、こういった記述を目にしませんか？ !DOCTYPE html PUBL

こんにちは、齊藤です。 7月15日にライブドアに入社しました。livedoor Readerとlivedoor クリップを担当しています。前職はエンジニアでしたので、技術の話もできるディレクターとして頑張ります。 今回は、「セマンティック WEB 」をサービスの企画に活かすための実例を紹介していきたいと思います。皆さんは「セマンティック WEB 」という言葉を聞いたことがあるでしょうか。今回はセマンティック WEB 構想を簡単にご紹介して、そのビジネス的な観点を考察してみたいと思います。 【01】セマンティック WEB 構想とは何か セマンティック WEB は、WEB 上に存在する様々なページにメタデータを付与することによって、WEB の世界を単純なデータの集合から進化させて、「意味」や「関係性」を持たせた巨大なデータベースにしてしようという構想です。その具体的な表現方法として、XML /

こんにちは、櫛井です。 webディレクターという仕事は色々な職種の方たちの間に入って調整をすることが多いのですが、一口で「調整」といっても結構難しいものです。webサイト開発に限らず、「言われたまま、言われた順にこなしている」という人が担当だと予定通りに物事は進みません。そこで今回は、webサイト開発時に頻繁に用いられるスケジュール作成方法についてお話してみたいと思います。 山ほどあるタスク、どれから手をつけるべきかを考えるためのヒントになれば幸いです。 ■ステップ.1　タスクに優先順位をつける まずはそれぞれのタスクに優先度をつけ、種類を決めて考えます。 ・クリティカル・パス (絶対に遅らせてはならないもの。最優先として認識すべきもの) 参照記事：プロジェクトマネジメントＯＳ本舗 ・やらなければいけないこと (バグ解消、トラブル対策で必須なもの、社外との交渉など) ・やっておくといいこと

こんにちわ。モバイルディレクターの飯田瞬です。 今回は、最近何かと話題のモバイル SEO について触れたいと思います。 モバイルの SEO が注目され始めたのはつい最近の話で、2006年に EZweb がメニュー検索に Google 検索エンジンを導入したあたりだと言われています。ですので、PC に比べてモバイル SEO は歴史も浅ければノウハウもまだまだこれからといったところです。 そこで、ライブドアではモバイルサイトにどういった SEO 対策を施しているかをざっくり簡潔に紹介したいと思います。 【01】クローラーのアクセスを許可 モバイルサイトのアクセス制御を IP アドレスで行っている (ホワイトリスト方式) 場合、各検索エンジンのクローラー IP 帯域からもアクセスできるように設定してあげる必要があります。 この設定を行わないと、そもそもクローラーがモバイルサイトにアクセスできずク

こんにちは。livedoor でモバイルディレクターをしている岡本です。 今回はケータイサイトでのユーザビリティについてお話します。 【01】PCと違うところって？ PCとケータイでのユーザビリティの違いを考えたとき、「画面」、「操作方法」、「スペック」、「容量」という主な4つのポイントがあると思います。 1）画面 画面が大きく、解像度も高いPCの方が視覚的に訴えやすく、Flashを使った表現などはPCとケータイサイトで格段の差が生じます。 2）操作方法 PCでは、主にマウスとキーボードによる操作ですが、ケータイではほとんどキー操作で行います。また、ケータイではほとんどの端末で「JavaScript」が使えません。 3）スペック ケータイでは端末やキャリア、各世代に依存してしまう問題が多いといえます。 （htmlの定義、アプリのプラットフォームなど) 4）容量 これだけみると、ケータイサイ

こんにちは。 livedoor でディレクターをしている有賀です。 今回は、「企画書の表紙の作り方」について書きたいと思います。 企画の産み方や書類の作り方についてのノウハウはたくさんありますが、実際に書き起こすにあたって、意外に見落としがちなのが、「表紙」ではないでしょうか？　以前、ライブドア社内でも、「表紙を作っている時間があったら中身を充実させた方がいい」という考えを聞いたこともありますが、「顔」であり「看板」である表紙が無かったり、つたないようでは、中身に辿り着かなかったり、誤解されたりするケースがあることも事実だと思います。もちろん、中身が薄っぺらなのに表面だけ過度に着飾ったり、表紙の作成に注力し過ぎるのも考えものですが、あくまで相手に読んでもらうため、伝えるためのものですから、最低限の礼儀というか、丁寧さは必要だと私は考えます。 そこで、今回は、企画書の表紙の作り方を題材に、書

『livedoor グルメ』と『本が好き！』の根岸です。今回は「SEOは単なる HTML の書き方テクニックではない」ということを中心に、極私的なSEO論をしていきたいと思います。 ■「検索上位にでない！　なぜか!」「坊やだからさ」 あるキーワードの検索に対して、自分のウェブページが検索結果リストの上位に出るようにチューニングすることを「SEO＝Search Engine Optimize」というのは、みなさんご存じかと思います。その基本テクニックとして、検索でヒットさせたいキーワードを titleタグや hタグや strongタグで囲うということをしている方も、多くいるのではないでしょうか？　それゆえ、hタグだらけのページなんてのも、少なくありません。そんなことをしても効果はほとんどないはずなのですが。 逆に「うちは FLASH 中心のサイト（※）なのに、検索上位に出まくりなのはどういう

こちらデイリー４コマ編集部です。 今回はGoogle Analyticsを利用したクリックカウントの取り方におけるちょっとしたコツについてお話ししたいと思います。 Google Analyticsはページ内に集計用のコードを貼り付けるだけで、業務用としても耐えられる、様々なアクセス解析できる優れもののツールではありますが、ただそれだけでは少々もったいないです。一つの機能としてクリックカウントを使ってみましょう。 例えば <a href="http://www.livedoor.com/">livedoor</a> というリンクがあったとします。このリンクが果たしてどれだけクリックされているかを知るために、以下のようにリンクに細工を施します。 <a href="http://www.livedoor.com/" onClick="javascript:urchinTracker('/live

こんにちは。ポータルサイト livedoor のトップページ運用を担当している中村です。さて、私が担当している運用か所のひとつに、「おすすめ情報」があります。 このエリアには、livedoor の各サービスの新着情報やキャンペーンなどを伝える“livedoor の最新スポット”というものがあるのですが、文章を形成していく際にいくつかのポイントがあります。 「短い文字数のなかで、いかに効果的にPRできるか？」これは私にとって日々の研究テーマなのですが、実践していることのひとつに“カッコを上手に使う”といったものがあります。 ■何を強調するかによって変わる、カッコの使い分け カッコにはさまざまな種類があり、使用目的によってどれを選ぶかが変わってきます。どれも基本的なことですが、意識をせず間違ったカッコの使い方をしてしまうケースもあるので、覚えておくと便利でしょう。 「　」カギカッコ …… 会話

こんにちは、ディレクターのほうの谷口です（余談ですが、ライブドアには3名の谷口がいて、私はプログラマーじゃないほうの谷口です）。今回は、ユーザーテストについてお話したいと思います。 ユーザーテストは、ウェブサイトの新規立ち上げやリニューアルの際、ユーザーがウェブサイトやプロトタイプを実際に操作してもらう様子を目の当たりにすることで、問題点を発見する方法です。 ライブドアのサービスは、作る側とユーザー像が近いことが多かったので、頻繁にはユーザーテストをしてきませんでした。しかし、今後は自分たちと違うユーザー像も対象としていきたいことから、ユーザーテストの数を増やしていきたいと思っています。 ユーザーテストの専門会社に頼むという手もあり、そうすることで厳密に調査をしてくれます。しかし、ポイントをしぼって外注せずにすむ方法もあるので、ここに紹介します。 1. 被験者は友人か知り合いでいい 専門会

こんにちは、佐々木です。 Webディレクターに必要な基礎知識って何？ という問題を考えるにあたって、『デジハリ』のようなスクールのカリキュラムを参考にしてみることにしました。まずは下記のリンク先をご覧ください。 Webディレクター専攻｜クリエイターズスクールデジハリ 網羅的にあらゆることを勉強するカリキュラムになっています。もちろん、それぞれの分野におけるエキスパートを目指す必要はないのですが、とりあえず知っておくべきことだけでもかなりたくさんあります。 Webディレクターの場合、この「とりあえず知っておく」ということがとても重要です。 個人の技術が問われる場面であれば、「ちょっと知ってる」というのは「まったく知らない」のと同じ意味でしかありません。しかし、専門の異なるエキスパートたちをまとめてプロジェクトを進める場面になると、「ちょっと知ってる」ことと「まったく知らない」ことの間には大き

こんにちは、『livedoor 歌詞』や『livedoor グリーティング』を担当している吉沢です。 今回は、モバイルサイトのデザインの決め方、デザイナーとの仕事の進め方をご紹介したいと思います。 モバイルサイトのデザインというと、画面が小さいし容量制限も厳しいし、デザインのやりようがないのでは？　と思うかもしれません。 確かに 1 年程前まではそんな状況だったのですが、世間的に 3G 端末が普及し、容量制限の緩和、通信速度の向上とモバイルサイトを華やかに魅せる環境が整いつつあります。 そこで『ケータイ livedoor』も昨年後半あたりから少しずつ 3G 端末をメインとした開発を行っており、今ではモバイルサイトの“こったデザイン”が必須となっています。 これまで、サイト開発時にディレクターがデザイナーにお仕事を依頼するタイミングは、サイトのリリース直前という場合がほとんどでした。最後の仕

※この記事は、2013年3月14日にアップデートしました。 こんにちは、「livedoor Reader」などのディレクターを担当している佐々木です。 「世界の技術者、刺激したい」―ライブドアRSSリーダー英語版公開 「RSSリーダーにも2対8の法則がある」と池邊CTOは言う。2割のヘビーユーザーが、8割のフィードを読んでいるというのだ。「livedoor Readerは、2割の人に最適化している」 これは弊社スタッフの偽らざる本音なのですが、そうは言っても、より多くの人に使っていただけるよう、livedoor Readerのサイト上では初心者向けの説明を中心に掲載しています。 しかしそれによって、2割のヘビーユーザーに対して満足な説明ができていなかったのではないか、ということを心配してきました。 そこで今回は、Webディレクター向け（つまり、2割に相当するヘビーユーザーであるべき職種の人

こんにちは、櫛井です。 現在はPC版のPICSやAuthなどのPCサイトを主に担当していますが、昨年の4月に公開されたlivedoor PICSのモバイル版の開発についてお話しようかと思います。 （当時はモバイルの部署におり、livedoorのモバイルサイトを色々と作っていました） 機能面などはプレスリリースや開発日誌などをご覧いただくとして、livedoor PICSモバイル版の開発は以下の手順で行いました。 ■モバイルサイト作成の下準備 元々PC版でlivedoor PICSというPCサイトをスタートしていたので、基本的にはモバイル版で見る際の要件をまとめ、連携する他のコンテンツの状況を調査し、見せ方を資料に落とし込んでいく作業というのをまず行います。 私の場合は最初は手書きです。要件やイメージをざっくり形にするだけなので大抵は30分くらいで一気に書きます。 かなり汚いですが、こういう