2011年2月24日
投稿者：Makoto Jo 
最近の人気のサイトに見られる共通する要素として、絞り込まれた機能、考えぬかれたユーザビリテイー、スマートフォン対応、多言語、ソーシャルネットワーキングと招待機能等を挙げることができる。 そこで、今回はあらゆるWebサービスの入り口とも言える「ユーザー登録とログイン機能」について考察してみました。 「ユーザー登録とログイン機能」はあらゆるWebサービスの必須アイテムとなっていますが、この登録作業を面倒だと感じた方も多いのではないでしょうか？ ここでは人気サイトがどのようにユーザー登録とサービスのフローを作っているか実例を御覧頂きます。 1. Twitter Twitterはさすがにシンプル。しかしながらしっかりとした作り込みが成されており完成度が高い。 例えば、テキストフィールドにカーソルを合わせたときの説明文や、ユーザーネーム等の重複防止、入力情報に問題がなかった場合の”OK”サイン等、技術的にはAJAXを使用したインターラクテイブな仕組みが随所に見られる。 2. Facebook 3.Youtube 4.Flickr 5.Groupon Grouponのユーザー登録は以下の5項目から成り立っています。いたってシンプルですね。 それと、注目すべきはFacebookとの連動です。CONNECTしてみましたがうまく動作していませんでしたこれはNGですね。
このアーカイブは ‘Web活用’ のカテゴリーです。
Good Web Design
http://www.bakerbarrios.com 現代的シャープなデザイン。背景画像で全面をカバーし、グリッドの利いたデザインで精悍さを打ち出している。 http://conversations.nokia.com ブロク・コンテンツとソーシャルネットワークとの連携、動画などを用いたNokia+Microsoftとの提携を取り扱ったスペシャルサイト。レイアウトや明るい色使いに流行を感じさせる。 http://www.interactivemediaawards.com Design Awardを取り扱ったサイト。柔らかいカラーバランスに好感が持てる。 http://www.pfizer.com 大手企業らしいいサイト。デザイン性よりむしろブランドやメッセージに重きが置かれている。 http://www.dreamstormdesign.co.uk/ フルスクリーンとして使われているシンプルな背景とそこに乗せているコンテンツが参考になる。 http://www.etsy.com/?ref=hdr モダンな感じのするショッピングサイト。 http://store.yankodesign.com/ 無理のないスッキリとしたデザインに好感が持てる。 http://fpslandscapes.com/ リキッドデザインの中に横幅固定のコンテンツが乗っている。上下のラインとその上に乗るロゴ、重なるようにデザインされているメニュー等がうまくあしらわれている。 http://store.yankodesign.com/ 販売アイテムの特性が考慮されたしっかりしたショッピングサイトデザイン。 http://www.pattyandersonjewelry.com/ ブランドの魅力が伝わってくるデザイン。一列に並べられた画像によって直感的に何を扱っているかがよくわかる。 Other Websites – Chemical & Life Science Industry – http://www.lyondellbasell.com http://www.shell.com/ http://www.showadenko.us/en/index.html http://www.basf.com http://www.dow.com/ http://www.ineos.com http://www.sabic.com/ http://english.sinopec.com/ http://www.m-kagaku.co.jp/index_en.htm http://www2.dupont.com http://www.akorn.com/ http://www.crowleychemical.com/ http://www.mgc-a.com/ http://www.showadenko.us/en/index.html …
Nivea — the Whitest Cream Ever
The Nivea brand is one of the most recognized body-care brand in the world. It was founded a century ago, in 1911 by the Poland and later German company Beiersdorf after developing water-in-oil emulsifier Eucerit (“beautiful wax”) to combine fats with oil for longer period. Before the conventional skin cream composition was expensive and quickly…
Websiteが備えるべき3つの視点
現在弊社では60日間に渡る“Web Development Boot Camp 2010”を実施している。 基本的にはWebsiteを作る実習である。先日はWebsiteを見る視点について話をさせていただいた。いいWebsiteとは何か？これには3つの視点が必要であると思われる。 サイトオーナーの視点： サイトを公開しているオーナー（会社）の意図するものは何か？何を伝えたいのか？管理運用体制等いわば制作者側としての視点である。これらを理解する事によって自社Website開発にも様々な意図を織り込むことが可能となる。 顧客視点： これは１ユーザーとしての個人的な主観（好き嫌い）と広く一般ユーザーを意識した客観的な視点がある。又、ユーザーは既存顧客なのか新規顧客なのかを意識し的を得たコンテンツを提供するように心掛けなければならない。 検索エンジン視点： 通常ユーザーは検索サイト経由で目的とするサイトにたどり着く。いわば検索サイトはガイド役を演じるわけだが、そのガイドさんにも「うちのサイトにはこういう情報がありますので紹介宜しく！」としておかなければならない。 次にユーザーの動きを時系列に考えてみよう。これをユーザーエクスペリエンスという。 通常ユーザーはHOMEに訪れる。そこで一瞬に「このサイトに私の求めるものがあるか否か」を判断する。そして「ここだ」と思えるものをクリックして次のページに進むわけだが、これらの一連の心理的な動きを理解・想定した上で情報を組み立てておく必要がある。これをインフォメーション・アーキテクチャーと呼ぶ。 サイトのコンテンツを組む上でも例えば物語を組むように起承転結がなくてはならない。強いて言えば3クリックで「お問い合わせ」や「購入」ページに誘導できる導線をしっかり作っておく必要がある。 よくWebsiteは問題解決ツールだと言われるが、ユーザーが抱える問題を想定し、それに回答を与える。そして、集客に繋がるような仕組みを構築していく事は単なるデザイン以上に重要である。
ユニクロ思考術
『ユニクロ思考術』佐藤可士和 ************************************* お医者さんの問診のように 僕の仕事は、お医者さんの問診と同じです。まずはクライアントから徹底的に話を聞くことから始めます。自分たちのブランドを世の中にどう認識してもらいたいのか？ 本来そのブランドが持っていたはずの本質とは何だったのか、その上でいま課題になっている部分は何だろうか。それらがお互いにはっきりと見えてくるまで話し合うわけです。この過程を抜きにして、なんとなく新しいイメージだけをデザイン的につけ加えたって、なんにもならない。 最初のうちは互いに矛盾する要望が並んでしまう。ビジネスといっても暮らしのなかの普通の欲求とたいして変わらないものです。「食べたいけど痩せたい」とか「遊びたいけど金も稼ぎたい」みたいなものがどんどん出てくる（笑）。 ベクトルがあっちこっちバラバラで相反する要望に、それぞれ対症療法で向かおうとすると、本当の意味での解決策は見つかりません。そのやり方だと、またいつか同じ症状が出て、同じ薬を出すという繰り返しになりかねない。 でもそういう矛盾は、企業の本質がしっかりしていれば、話し合っているうちに「こういう視点から見れば、答えはスパっとひとつになりますよね？」と提案できるところへたどりつきます。その視点を見つけ出すのが僕の仕事です。 最初からロゴが頭にひらめくとか、いつかこういう書体でデザインしてみたかったとか、デザイナーとしてやってみたかった絵柄をここで表現させようなんていうのは、まったくない。ひらめきでやりたいことをやっている、と思われることもあるみたいですが、デザインは一人歩きはできない。まずは問診ありき、です。 ************************************* クリエイティブの力 矛盾する希望をひとつに集約できる視点が見えれば、そこからはデサインの力、クリエイティブの力の出番になる。 ここは問診と違って、あざやかに一気にやらねばならない。問診の結果をもとに、単純な足し算をしていては駄目なんです。クリエイティブの仕事にはある種のジャンプが必要だからです。模範解答的なデザインでは、「まあ否定はできないけど、感動もしないなあ」という（笑）平均点的な結果にしかならない。 美大を卒業してから僕は広告代理店に入ったわけですけど、入社する前は広告に対して「メディアを使ったアート」のようなイメージを持っていた。だから会社に入ってみたら「えーッ？ 全然イメージと違う！」（笑）と驚いたこともあります。広告というのは企業の経済活動や経営戦略の一環であって、必ずしもアート的な格好いい広告をつくるのが正解とは限らないわけです。というか、格好いい広告は特別な事例。代理店での十年間で、僕はクライアントの要望とはどういうものか、結果はどうやって出していくのか、世の中の常識的なことを一から学ぶことになった。だからと言って、自分のなかのアート志向を葬り去ったわけじゃない。「ダセえなあ」と感じる美大生的な感覚は、それはそれとして維持し続けています。それがジャンプする原動力にもなっている。
ウイルス、マルウェア対処法
【はじめに】 先月、取引先のサイトがウイルス（Malware）の被害に遭った。突然現れるWarningのメッセージは結構インパクトがあり、当然のことながら緊急対処を迫られる。 因みにこのメッセージはブラウザーによって表示されたりされなかったりするのだが、今回はウイルス被害者の方々の参考になるように修理方法や対処方法などを解説してみたい。 マルウェア (Malware) とは、不正かつ有害な動作を行う意図で作成された悪意のあるソフトウェアや悪質なソフトウェアの総称である。マルウェアには、様々な脅威が含まれる。マルウェアの例としては、コード、バックドア、キーロガー、トロイの木馬、WordやExcelのマクロウイルス、ブートセクタウイルス、スクリプトウイルス (BAT、Windowsシェル、JavaScriptなど)、クライムウェア、スケアウェア、スパイウェア、悪質なhttp://ja.wikipedia.org/wiki/マルウェア[1]、ミスリーディングアプリケーションなどがある[2][3][4][5]。日本では、「悪意のある不正ソフトウェア」または「不正プログラム」とも呼ばれる[6]。 出典: フリー百科事典『ウィキペディア（Wikipedia）』http://ja.wikipedia.org/wiki/マルウェア １．先ずは全てのファイルをサーバーからダウンロードし取り去る*1。 ダウンロードする際には作業時間を短縮するためにいらないファイルは消してしまおう。 *1 私は public_html を public_html_infected という風にフォルダーごとアクセスできないようにした。そして、新しくpublic_htmlフォルダーを作り Under Maintenanceのページを置くことにした。そうすることによってＧｏｏｇｌｅ側への報告が早く又確実なものになるからである。先ずはWarningメッセージを取り去ることが第一、サイトの修復はその後で良い。 public_html_infected をフォルダーごとダウンロードはじめよう。ダウンロードしている間に次の作業に移る。 ２．Warningメッセージを取り去る為にはGoogleにコードリビューをお願いしなければならない。それにはGoogle Webmaster tools にアカウントを作る必要がある。 又、Verification用のファイル又はコードをサーバーにＵＰする必要がある。ウイルスが検出されなければ上記の赤い画面は表示されなくなる。 これでホッと一息つける。 https://www.google.com/webmasters/tools https://www.google.com/webmasters/tools/reconsideration こんな感じのメッセージを送った。 I have removed all files from my server except fresh “Under Maintenance” index.html page. please review my site. ３.さてダウンロードしたサイトのコードを調べる。 私の場合はDreamweaverのFind and Replace機能を使って怪しいコードを検索した。 ４．以下がいわゆる…
ワンクリックで$51.66㌦
ウエブサイトを作ればいいという時代は終わったと思う。 つまりウエブサイトを立ち上げる事が目的化してしまっているプロジェクトは意味をなさないかもしれない。勿論、無いにこしたことはないが、立ち上げてもあまりアクセスはないと思う。 Ａｄｗｏｒｄｓのキーワード単価も高くなってきている感があるが、それもアクセスを集めるための手段として仕方がないかもしれない。 1. Conference calling companies – $51.66 CPC 2. Purchase structured settlements – $51.48 3. Home owner secured loan – $50.36 4. Mesothelioma patient – $50.23 5. Austin texas dwi lawyer – $50.03
badware対処法
Ｗｅｂアプリが高度・複雑化するとやはりセキュリティー対策は必要になりますね。 http://www.stopbadware.org http://badwarebusters.org あたりでじっくり防御策を学んで実施する時間をとりたいものですが、私の経験から言うとバックアップを取った際にサイト全体をスキャンするのがいいと思います。badwareやＭａｌｗａｒｅは大体<iflame> タグを使ってく埋め込まれており、大体のリンク先は.cn ドメインですので <iflame> を検索し、.cnドメインを探すと変なコードが埋め込まれていると見つかるはずです。因みにこの手のコードが狙うのはindexファイルで適当に繁殖しますので、一箇所で見つかれば他にもやられている可能性大です。 たいがいはGoogleのクローラーがサイトのオーナーより先に発見して、ブラウザーに警告メッセージを出してくれますが、Ｗｅｂサイトはハッキングされるものだと考えておいた方がいいでしょう。
日本人の多数決はいい結果を導き出せるのか？
■ビジネスパーソンが選ぶベンチャー企業ウェブサイト200選–1位はコネクティ http://v.japan.cnet.com/news/article/story/0,2000067548,20384506,00.htm ■ホームページ充実度ランキング、1位は東芝 http://japan.cnet.com/news/media/story/0,2000056023,20383077,00.htm 日本のベンチャー企業やＷｅｂ（ホームページ）のレベルですが、この結果をみると今ひとつかな～という印象は拭えません。一言で言えば「当たり前すぎる」 批判するには代案が必要と思いますが、例えばベンチャー企業で１位に選ばれたコネクティ。同、２位、３位の会社も含めて「これでベンチャーと呼べるのか・・・」と思うほど新規性には乏しいと感じました。これはベンチャーと言うよりうちみたいな単なる制作請負業ではと・・・。こういったサービスであればＪｏｏｍｌａやＷｏｒｄｐｒｅｓｓのようなオープンソースの方が余程いいんじゃないかというのが私の感想です。ベンチャーというからには、新規性や独自性をもっと色濃く出すべきでしょうが、それは日本では難しいのでしょうか？特にソフトやＷｅｂ関連では米国の後追いばかりですね。 東芝のホームページですが、デザインに色気つまり「美」を感じるような芸術性が無い。下手するとワイヤーフレームなんじゃないかと思うほど魅力の無いデザインで「何故これが一番なの？」と思いました。東芝のサイトとＧＥを比較すれば「大手サイトでも日米でこうも違うんだな」とご納得いただけると思います。 東芝： http://www.toshiba.co.jp ＧＥ： http://www.ge.com {flashtagcloud}
リカバリー必勝マニュアル
最近のサイトはＨＴＭＬベースでの会社案内サイトはぐ～んと減り、殆どのプロジェクトはカスタマイズされたＥコマースやＣＲＭ、そしてＣＭＳを駆使したもので構築の難易度もさることながら管理の面でも気が抜けない。 特にデータベースを使ったサイトというものは時々おかしくなるものだ、メンテ無しで10年近く稼動しているサイトもあるにはあるが危険度は高いのでサイトが健康なうちにバックアップを正しくとっておくことを強くお勧めする。 バックアップを正しく取る、つまり障害が起きた際どういう手順でリカバリーするのかを押さえる必要がある。くれぐれもバックアップファイルがあるだけで安心してはならない。 ということで、幾つかのチエックポイントを挙げ実際にバックアップとリカバリーの検証をしてみました。 障害に様々なタイプがある。単にスクリプトエラーが出る程度のものから、データベースのデータが消えてしまうとか、ＨＤＤが潰れてしまうとか・・・・。 バックアップの基本は以下のファイル（データ）が取れている事。 HTML,CSS,JavaScript、PHP, Image 等のサイトを構成しているファイル Data Base Email Account SSL 今回は弊社で使っているWHM/Cpanelを使ってテストしてみました。 ファイルは消しても復元できました。 MySQLについては消した後も復元できました。 Emailアカウントとメッセージは未確認。 SSLのCertificateに関しては未確認。 ポイント サーバー内は常に整理整頓しておこう。いつのまにか不要なファイルがたまり全体のサイズが必要以上に膨れ上がっていることはよくあるが、サイズが重いとダウンロードとアップロードに支障をきたす。不要なデータベースも削除しておく。 サイトが完成した瞬間のバックアップはマスターとしてしっかりCD-ROMに焼いておく。 内容はPSDやFLA等のソースコード、サイト構成ファイル、データベース、ドキュメンテーション等 本番サーバーとは別に、正常に動作している状態で開発サーバーに残しておく。（Portfolioとして使用可） パスワードは一定時期に更新するように。
ECサイトと実店舗の使い分け調査
最近のネットユーザーはECサイトと実店舗をこんな風に使い分けている! ／消費行動に関する調査調査結果の要約 ・金融商品は75％、化粧品は40％がインターネット上での購入をメインに ・家電製品、化粧品、金融商品は購入以前の情報収集に意欲的・インターネット上での購入者はクチコミ情報収集を積極的に利用 ・70％以上のユーザーがECサイトの“知名度”を気にしている・ただし、理想的なECサイトは知名度はなくても割安なサイト ・ECサイトにおいて男性は「規模」、女性は「信頼」「評判」を重視する ・男性に比べ女性のほうがクチコミ情報の影響を受けている ・若年層ほどクチコミ情報を意識し、年齢が上がるにつれ影響を受けにくい傾向に http://web-tan.forum.impressrd.jp/e/2009/02/03/4558
80対20の法則とロングテール
オンラインストアの特徴を考えてみよう。ユーザーの視点で見ればオンラインストアはいつでもOPENしている。年中無休が当たり前だ。店舗（運営会社）がどこにあるかはどうでもいいことだ。アメリカの場合州外であれば税金を免れることが多く送料を払ってもお釣りがくる。そしてAmazon.comのような有名店にいくとアイテム数は非常に充実しており、商品価格も安い。 一般に商品販売では「80対20の法則」が成立することが知られ、このためABC分析などを行って売り上げ下位のアイテムを“整理”することが必要だといわれていた。これは売り場面積や在庫スペースなどの物理的制約があって限られたアイテムしか扱うことができず、かつ在庫（店頭在庫含む）には固定費が掛かるために、それを賄うだけの在庫回転率のあるアイテムでなければコスト的に見合わなかったからだ。 しかし、オンラインビジネスでは無限ともいえる売り場スペース（ウェブサイト）を用意することができ、地代の安価な場所に在庫スペースを設置することができるため、従来の物理的制約の多くを乗り越えることができる。特にデジタルコンテンツのダウンロード販売のような在庫固定費をほとんど無視できるビジネスでは、数年に1回しか売れないようなアイテムであっても、データベース上に登録しておくだけでよいなら“整理”する必要はなく、そうしたアイテムを数多く用意することで大きな売り上げを期待することができる。 ロングテールとは、このような従来ならば“死に筋”と呼ばれたニッチ商品（群）のことをいう。これは縦軸に販売数量、横軸にアイテムを販売数量の多い順に並べたグラフを描いた際に、販売数量の少ないアイテムを示す部分が長く伸びるさまをロングテール（長い尻尾）に見立てた呼び名である。 販売数量曲線の“尻尾”部分に現れるニッチ商品がロングテールである。取扱アイテムが多ければ多いほど、尻尾も長くなる。 ロングテールの本質はニッチ商品を販売できるという点にだけあるのではない。通常売れ筋の人気商品は誰もが取り扱う為、価格競争が激しくなる。薄利多売となり、飛ぶように売れても儲けがでない場合もある。逆にロングテール部分のニッチ商品は販売量こそ少ないが、その分競争も少なく厚利小売を実現できる高付加価値商品と位置づけることが出来るわけだ。これがロングテールの本質である。
