「ざっくり言うと」から学ぶ！スマホ時代のウェブコンテンツに最適な「要約」のススメ : LINE Corporation ディレクターブログ
お疲れ様です、ニュースチームでディレクターをやっておりますスエヒロと申します。 さて。弊社で運営しております「livedoorニュース」というサービスをご存知でしょうか。2003年のサービス開始より、(数々の事件を経て)現在も300を超える提供元の記事を配信しているニュースサービスです。日本有数の波瀾万丈さを兼ね備えたニュースサービスといっても過言ではないでしょう(多分)。 ニュースを要約する さて、そのlivedoorニュースにおきまして、昨年2012年の10月より提供しております「ざっくり言うと」という機能をご存知でしょうか。どんなものかと言いますと、 「ニュースの内容を三行程度に要約して表示する」 という機能です。例えば、「テレ朝・前田有紀アナが3月退社」というニュースの場合、以下の様な要約が「ざっくり言うと」として付与されています。 「要約」つまり「文書の要点を簡潔にまとめたもの」
ディレクターの為の「笑点」で学ぶ管理画面の作り方 : LINE Corporation ディレクターブログ
歌丸師匠風に始まりましたが、お疲れ様です、ウェブサービス本部サービス企画2室のスエヒロと申します。 さてさて。 管理画面あるある 管理画面使っていますか？ウェブサービスを立ち上げる時に、一般ユーザが使う画面とは別に、裏側からデータを更新したり、ユーザ情報を確認したりするために、管理画面(ツール)を用意することが多いですよね。運用が多いサービスでは欠かせないものです。 しかしサービスを立ち上げる時に、優先的に実装されるユーザ側の画面に比べると、なにかと後回しにされがちなのも管理画面。デザインがあたってない荒野のようなテーブルレイアウトや、機能が足りなくて修行のような手運用が発生している管理画面なんかもたまに見かけますよね。 難しいですよね、管理画面。 そうだ、笑点で考えてみよう そんな管理画面をもっと楽しく学びたい。楽しいといえば「笑点」ですね。言わずと知れた国民的番組、笑点。笑点の管理画面
今さら聞けない？！Webディレクターの為のSass講座 : LINE Corporation ディレクターブログ
こんにちは。ウェブサービス本部の hamashun です。 今回は CSS を便利にする Sass （さっす）という技術を、ディレクター向けにご紹介します。 最初に結論：Sassとは？ CSS の、コーディング効率やソースコードの保守性を向上させる技術が、Sass です。 まずは普通のCSSについて Sass のことを知るには、まずは CSS のことを知っておく必要があります。CSSを自分で書ける or 読める人は、この項は飛ばしてしまってかまいません。 p { color: red; } このソースコードは、ごくシンプルな CSS です。このソースコードの各部分を解説すると、次のようになります。 従って、上記のソースコードを日本語にすると、「p要素（pタグ）内の、文字色を、赤にする」となります。 こうして見てみると、CSS の構文は、とてもシンプルであることが分かります。 CSS は、こ
集計データ全部見せます！ディレクターブログの各種データまとめ : LINE Corporation ディレクターブログ
こんにちは。ディレクターブログ編集部です。 去る6月11日に、当ブログは開設５周年を迎えました。 （５周年記念UST生放送も実施しました） 投稿された記事数は800エントリーを越え、おかげさまで多くの読者の方々に新旧様々な記事をお読みいただいている当ブログですが、この節目のタイミングで、アクセス解析を用いて確認できる各種データを明らかにしてみたいと思います。 ※ 尚、今回のデータの参照先となったGoogle Analyticsの利用を開始したのが2009年4月からの為、数値は全てそれ以降の間に集計されたものとなります。 サマリーデータ ページビュー数 ※月別PV推移(2009年4月〜2012年5月) この間（39か月間）のトータルPV数は 3,641,984PVでした。今年に入ってからは安定的に毎月10万以上のPVとなっています。 訪問別ページ数 1.32ページ。 平均滞在時間 1分3秒。
スマホアプリ開発現場におけるUI採用の試行錯誤 - ロケタッチの場合 - : LINE Corporation ディレクターブログ
こんにちは、ユティです。ロケタッチを担当しています。 スマートフォンで展開するサービスの開発では、1つ大事なことがあります。それは、4インチ前後の画面にすべてを詰め込まなくてはいけないということです。これ以上、画面のサイズが大きくなると片手で持てなくなるので、この4インチ前後というサイズのトレンドはしばらく続くでしょう。アプリが複雑になればなるほど、この狭い画面に展開する UI で悩むことになり、その度に私たちはいろいろな方法でその壁を乗り越えていくことになります。 ロケタッチも、リリース以降機能がどんどんと増え、その度にアプリ内の UI、特にメニューのところをどうしようかという話になりました。今回は、そのメニュー周りのUIを中心に、近頃のロケタッチのUI事情についてご紹介したいと思います。 代表的なメニューUIと、トレンドのスライドメニュー まず、過去のロケタッチを例に、多くのスマートフ
Peachyアプリで見る、「いまどきF1層のスマホ新基準」 : LINE Corporation ディレクターブログ
ニュースチームの渡辺と申します。まずはお知らせをさせてください。 担当している女子向けニュースサイト『Peachy』のスマートフォンアプリが、先週メジャーアップデートを行いました。 Peachyは、コスメ、ファッション、恋愛コラムなどの記事を毎日100本以上配信する、女子向け総合ニュースサイトです。女子向けニュースサイトの中では数少ない1000万PV超えを記録するなど絶好調なのですが、特にスマートフォンアプリからのアクセスの伸びが大きく、評判も良いため、今回「読みやすい」「カワイイ」「毎日使いたい」をキーワードに、大幅な作り直しを行いました。 そこで今回は、その際に使用したマーケティングデータと、25歳〜30歳女性がコアターゲットのPeachyアプリユーザーの利用動向を活用しながら、女性(F1層)スマートフォンユーザーについての考察をまとめてみました。 F1層のスマートフォン選びは、「デザ
WebDirectorMeetup Vol.7 開催レポート : LINE Corporation ディレクターブログ
こんにちは。薮田（@yabucccchi）です。 先日、盛大に行われましたウェブディレクターミートアップ。 総勢230名を超える応募者の中、無事終了いたしました。 参加いただきました、WebディレクターやWebプロデューサーのみなさま、本当にありがとうございました。 会場の様子をフォトレポートとしてアップいたしましたので、ご覧ください。 【場所】株式会社ミクシィ 今年は株式会社ミクシィ様、Find Job！様にご提供いただきました。普段なかなか足を踏み入れることがないので、会場に入れるだけで喜んでもらえてたようですね。 【タイムテーブル】 19:00 開場 19:30 乾杯／交流会開始 20:00 インターネット大好き選手権（クイズ大会） 21:10 WebディレクターLightning Talk 22:30 閉会おかげさまで過去最大の参加人数でした。みなさんいろんな方と交流していただけた
ディレクターの日常業務で役立つGoogle Chromeのアドオン10個 : LINE Corporation ディレクターブログ
ディレクターの渡邉雄介です。 皆さんは仕事中にどんなWebブラウザを利用していますか？ 私の周りは一昔前はFirefoxが多かったのですが、最近はGoogle Chromeをメインで使っている人が増えてきた気がします。 Webブラウザのシェアを調べてみると、10月時点で国内ではChromeが2位のFirefoxに迫る勢い (世界的にはすでにFirefoxを抜いて2位) ということで、今後のWeb開発においてはChromeの存在も無視できない存在になってきたのではないでしょうか。 ※参考: ChromeブラウザシェアがFirefoxを抜いて2位に！IEを抜いてシェアトップになるのは2012年5月中旬頃の予想 | Chrome Life 私自身も1年ほど前にメインで使うブラウザをFirefoxからChromeに変えました。以前はFirefoxほど便利なアドオン (機能拡張) がありませんでした
モバイルサイトの3キャリア共通CSSと最新コーディング事情 : LINE Corporation ディレクターブログ
こんにちは、「livedoor Blog」を担当している吉沢です。 スマホの登場で、すっかりケータイ (フィーチャーフォン/ケータイ/ガラケー) が日陰に追いやられた感がありますが、ケータイも毎年進化していて、モバイルサイトの開発が行いやすいケータイがユーザへ浸透してきています。 livedoor Blog では、スマートフォン分野に注力しながら、月間15億PV あるケータイ版のUI最適化にも引き続き取り組んでいます。今回は、livedoor Blog で採用した事例を元に、この先1〜2年のケータイ開発・運用に役立てられる、3キャリア共通の CSS から最新のコーディング事情を紹介したいと思います。 アクセスシェア〜ライブドアの場合 まずはどの世代のケータイをメインに開発して表示くずれを起こさないようにするか検討するため、アクセスシェアを把握します。 1年前と比べると、iモードブラウザ2.
livedoorデザイナーおすすめ！デザイン技術を鍛える"ネタ本"4冊 : LINE Corporation ディレクターブログ
こんにちは！ライブドアデザイナーの杉田です。 前回の『デザイン思考を鍛える"ネタ本"』に引き続き、 今回もディレクターブログにおじゃまして【デザイナーの”ネタ本”】をご紹介したいと思います！ 欧文書体―その背景と使い方 欧文書体―その背景と使い方 (新デザインガイド) 著者：小林 章 販売元：美術出版社 (2005-06-16) 販売元：Amazon.co.jp クチコミを見る ◆推薦者: 峰尾 (ANKER、livedoorプロフィール担当) ずばり、タイトルの通り「欧文書体の正しい使い方」が分かる本です。 デザインをする上で、使うことが多い欧文ですが、書体はどのように選んでいますか？ かっこいいから？なんとなくサイトに合ってるから？ 仕事上、英語を使う機会がとても多いのに、欧文書体の使い方、選び方が適当だったりします。 お恥ずかしい話し、自分がそうだったんです。 海外でたまに見かけるお
livedoorデザイナーおすすめ！デザイン思考を鍛える"ネタ本"4冊 : LINE Corporation ディレクターブログ
こんにちは！ライブドアデザイナーの杉田です。 ライブドアのデザイナーは、ポータルサイトをはじめブログやロケタッチなどのwebサービス、デコポスト・デコミィなどのモバイル系サービス、広告案件等、多岐にわたったデザインを担当しています。 今回はそんなデザイナー陣が、ディレクターブログにおじゃまして【デザイナーの”ネタ本”】をご紹介したいと思います！デザインのデザイン 著者：原 研哉 販売元：岩波書店 (2003-10-22) 販売元：Amazon.co.jp クチコミを見る ◆推薦者: 杉田 (ブログ担当)私が紹介させていただく本は、愛知万博のプロモーション、無印良品のアートディレクションなど第一線で活躍されているグラフィックデザイナー、原研哉さんの著書「デザインのデザイン」です。 なんだか禅問答みたいなタイトルですが、私にとって「デザインの教科書」のような本です。 デザインの歴史や、著者の取
スマートフォン開発に学ぶディレクターの視点 : LINE Corporation ディレクターブログ
こんにちは、ブロググループの池田です。 先日、livedoor Blogでリリースしたスマートフォン向け「デザインカスタマイズ」。スマートフォン時代が奔流になりつつある中、今回のスマートフォン開発を通じてWebサービスを運営するディレクターに必要な視点が見えてきたのでまとめておきたいと思います。 7月14日、livedoor Blogでスマートフォン向け「デザインカスタマイズ」を公開 7月14日、livedoor Blogでスマートフォン向け「デザインカスタマイズ」をリリースしました。 スマートフォン版ブログカスタマイズ機能リリースのお知らせ ブログのスマートフォンページをカスタマイズして、自分だけのオリジナルデザインを作ることでき、さらに、HTMLやCSSの知識がなくても、誰でも簡単に利用できる機能です。 ブロガーにとっては、自分の個性をデザインで表現することができ、ブログ読者にとっては
Facebookアプリの開発で理解しておくべき3つのポイント : LINE Corporation ディレクターブログ
こんにちは。新規開発グループディレクターのtakejuneです。 昨年の映画『ソーシャルネットワーク』公開以降、日本でも本格的に流行しつつあるFacebookですが、FacebookのAPIを利用したアプリケーションの開発もまた本格化の兆しを見せています。 ライブドアでも先日、初めてのFacebook連携サービス「ソーシャレット」をリリースしました。今回はその開発を通して発見した、FacebookのAPIを利用したWebサービスの開発をはじめる前に知っておくべき3つのポイントをご紹介します。 【目次】 Facebookとの連携方法を理解するユーザー情報へのアクセス権限について理解する最新情報の入手方法について理解する Facebookとの連携方法を理解する 「FacebookのAPIを利用したWebサービス」というと、どんなサービスを思い浮かべますか？ CityVille、Quora、ロケ
【スマホ集中連載 第11回(最終回)】過去10回分の“大事”なところをまとめました : LINE Corporation ディレクターブログ
こんにちは。新世紀メディアグループの石野です。 3月より始まりました短期集中連載「ディレクターのためのスマートフォン講座」も今回で最終回となります。11回を数える連載となりましたが、お付き合いいただきありがとうございました。 最終回は、本特集をダイジェストに振り返っていきたいと思います。過去10回の記事を読んでない人も大事なところを把握しやすいよう、ピックアップしていきます。 基礎勉強：スマートフォンの市場規模〜【第1回】 ◆【スマホ集中連載 第1回】 "スマホ時代は本格的に始まっている" 〜スマートフォンの市場動向まとめとlivedoorのPV 市場動向についてのまとめています。 ケータイ端末の契約台数は、1億1千万台でそのうち6%がスマートフォンユーザーとなります。各キャリアの販売予測から、2011年末時点で20%近くまでシェアが伸びると予測しています。この辺りの数字は覚えておいた方が
【スマホ集中連載 第4回】 "HTML5とCSS3で何ができる？" 〜メリット・デメリットを徹底研究！ : LINE Corporation ディレクターブログ
※この記事はChromeで見るのがおすすめです。 こんにちは。新規開発グループ ディレクター兼マークアップエンジニアの浜です。 スマホ連載の第4回目は、HTML5とCSS3という実装寄りの内容になります。とは言っても難しいコードはあまり出てきません。「HTML5とCSS3で何ができるのか」という事をメインに、知っておくと、構成書を作る時のアイディアベースになったりデザイナー・マークアップエンジニア（コーダー）と打ち合わせをする際に話しやすくなる内容をお送りします。 記事のアウトラインは以下です。 そもそも、HTML5とCSS3ってもう使えるの？ HTML5とCSS3を使うメリットは？ HTML5とCSS3で何ができるの？ そもそも、HTML5とCSS3ってもう使えるの？ 使えます。 （※ここから先は、その根拠について説明します。必要ない方は、次の章に飛んでしまっても構いません） 現在のスマ
スマートフォンサイト運用と今後のスマートフォン市場の展望 : LINE Corporation ディレクターブログ
スマートフォングループの藤村です。2か月前まで、モバイルで、livedoorトップ・デコメサイトの運用を担当していました。 10月から新しい部署のスマートフォングループに所属し、すでに、スマートフォン版のlivedoorトップ＆ニュース他の運用を開始しています。実際に運用してみると、モバイルとの共通性が多く、モバイルサイトの運用経験が生きる領域だと実感しました。 まだまだ運用の初期フェーズの段階ですが、今回は、実際にスマートフォンサイトを運用してみて気づいた点及び、今後のスマートフォン市場の展開予想について書いてみようと思います。 ファーストビューの重要性 スマートフォンのサイトを運用してみて、まず一番最初に改修を入れたのが、ファーストビューです。ファーストビューとはユーザーがモバイル端末でアクセスして、一番最初に表示される画面のことを言います。 モバイルサイト運用経験者の方には常識かと思
ロケタッチのつくりかた 第6回 プログラマー（ケータイ版）編 : LINE Corporation ディレクターブログ
はじめに こんにちは、平野です。 ロケタッチではアシスタントプログラマーという立場で、本連載の第4回に登場したメインプログラマーの吉川さんのお手伝いをしています。あとケータイ版や、社内向けの管理画面なども担当しました。 お手伝い お手伝いの具体的な内容は、吉川さんが私に「○○な機能を作って」と指示を出すので、それを作ります。 ですがプログラムの主要な機能は吉川さんが既に用意しているので、私がすることはそれらを利用して、必要なデータを処理・操作するだけです。なので、私がゼロから機能を作った部分は少ししかありません。また、プロデューサー/ディレクターから指示をもらうこともあります。 そのお手伝いの際に、当然吉川さんのコードを読むことになるのですが、これがとても勉強になりました。また、私がコミットした部分が、後に吉川さんによって数段クールなコードになって返ってくることもよくありました。 このお手
プロジェクトメンバーが幸せになれるワイヤーフレームの作り方 : LINE Corporation ディレクターブログ
こんにちは、livedoor Blog 担当の飯田です。 ちょうど新機能のワイヤーフレームを描いている最中だったので、今回は正解があるようで無いディレクターのメイン業務の一つ、ワイヤーフレームについて自分なりにどう考えて作っているかを簡単にまとめてみました。 特にワイヤーフレームをこれから初めて作ってみるという人の参考になればと。 ワイヤーフレームって？ ウェブサイトを構成する要素・動作をまとめた資料になります。構成書・モック・スケルトン・青写真と呼び方は人それぞれです。 ということで、実際以下の感じでワイヤーフレームを作っていきます。 とりあえず紙に描く 頭の中で考えていることをとにかく裏紙などを利用して紙に描いてみます。ワイヤーフレームと聞いてデジタルなイメージがありますが、こうした構想やアイデアベースの状態のときは、たくさん手を頭を動かして思いを出し切った方が整理がしやすくなります。
スマートフォン最適化を実施する際に最低限抑えておきたいこと : LINE Corporation ディレクターブログ
こんにちは。livedoor グルメを担当している澤田です。 livedoor グルメでは3月に、iPhone版Safariブラウザでの表示最適化に対応いたしました。これは、iPhone版Safariブラウザでlivedoor グルメを閲覧した際に、PC版の画面ではなく、iPhoneの表示サイズや使い方に合わせてカスタマイズされた画面を表示させるものです。 最適化されてないサイトの場合は、基本的にPCと同じ画面がiPhoneに表示されるので、表示される画面が小さく、大量の画像データなどを読み込むため表示に時間もかかります。 この「最適化」の作業を行うことで、iPhoneユーザーにとって必要な機能を、より使い易いナビゲーションで提供できるようになります。 今回はその画面開発時に、ユーザーの使い勝手に留意して設計した、いくつかのポイントについてご紹介します。iPhoneをお持ちの方は、ぜひSa
「CocProxy」という便利なツールを知っていますか？ : LINE Corporation ディレクターブログ
こんにちは。ブログビジネス部 石野です。 livedoor Blogやクリップ、Readerの担当ディレクターです。 今日は「CocProxy」というツールをご紹介します。 同僚のプログラマーに教わったのですが、便利です。 コーディングにも携わるディレクターにはぜひ知っておいてほしいツールです。 CocProxyとは ブラウザからのリクエスト先をローカルファイルに置き換えてくれるプロキシです。 （一見取っつきにくそうですが） デバッグ時にその環境を用意をするまでの手間をなくしてくれる、時間短縮してくれるツールです。 メリット Ajaxを使っているなど、デバッグ環境を用意するのが大変な場合もプロキシの切り替え1つで済みます。 また、確認するために編集したファイルをサーバへアップロードして…といった手順をスルーできます。 amachangさんのこの記事を見て「名前は知っていたけど」という方も、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
