Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
モバイルゲームの歴史を年代別にご紹介します。モバイルゲームの成長と今後について詳しく解説していきます。
モバイルゲーム 物凄い勢いで勃興したモバイルゲーム業界は、いろいろな課題や問題に直面しながらも巨大化し、今日の時点でのスマートフォン向けゲームの市場へと継承されていきます。 モバイルゲームの歴史 2001 Javaアプリと3Dゲームの登場 Javaが利用できるようになったことにより、ダウンロード型のゲームが供給できるようになりました。 2002 携帯電話端末の大容量化・3D化競争 Java搭載携帯電話端末が登場してからごく僅か1年の間に、アプリのサイズに関しては10倍に広大化し、表現方法も2Dから3Dにシフトし始めました。J-PHONEは『ゼビウス』や『スペースハリアー』などといった昔のアーケードゲームを、ドコモはSIMCITYなどパソコンで世界的規模のヒットを飛ばしたゲームを主力商品としていました。 2003 モバイルゲームの一般化 メモリの制限が厳しいJava仮想マシン上ではなく、OS
検索エンジンに無料登録しよう！アクセスアップ＆SEO対策 基本編 - 副業クエスト100
スマホ向けにモバイルフレンドリー対策を！ 近年で大きかった変化のひとつがモバイルフレンドリー対策でしたね。 今はパソコンよりもモバイルからの訪問が多いので、スマホやタブレットに対応したレスポンシブデザインにしておくことが大事です。 もし、まだモバイルフレンドリーテストをクリアしていないのなら、必ず対策しておきましょう。 WordPressならレスポンシブなテーマに変えるか、スマホ表示ができるプラグインで対応できます。 モバイルフレンドリーじゃないとマイナスの評価を与えられるだけではなく、モバイルユーザーの直帰率も上げてしまうのでまだ対策していない人は要注意！ 画像は記事を読み進めてくれるスパイスになる！ 記事の最初にアイキャッチ画像を設置したり、見出しの下に画像を挿入しておくだけで、読み進めてくれる人の割合を増やすことが可能です。 マーケティングの世界でも有名ですが、多くの人はまずスマホで
使えるユーザビリティーガイドライン10 – creamu
遅いエントリーですが、Smashing Magazineで使えるユーザビリティーガイドラインがまとまっています。 ざっとご紹介しますね。 1. フォームのラベルはフィールドの上がベスト study by UX Mattersによると、フォームのラベルはフィールドの上が理想的とのこと。多くのフォームで、ラベルはフィールドの左に置かれ、2カラムのレイアウトになっている。いいデザインだが、最も使いやすいレイアウトとは言えない。なぜなら、フォームは一般的に垂直方向に並んでおり、ユーザーは上から下に向かって入力していく。ユーザーは視線を下の方向に向けていくのだ。そのため、ラベルが左にあるよりも、同じ方向にある方が認識しやすい。 2. ユーザーの視線は人の顔に向く Webページを見るとき、人の顔や目に視線が行く。マーケッターにとっては、注目を集める有効なテクニック。ユーザーは画像の中の人の視線が向いて
顧客を逃してしまう、Eコマースサイトの15のポイント
Eコマースサイトの設計・制作時の間違いで、顧客を逃してしまう15のポイントと解決方法をSmashing Magazineから紹介します。 15 Common Mistakes in E-Commerce Design 下記は、そのポイントと解決方法を簡潔にしたものです。 原文ではキャプチャ入りで詳細に解説されています。 商品の詳細な紹介ページが無い。 商品の外観・材質・重量・寸法など詳細な情報を提供します。 連絡する手段が分かりにくい（提供されていない）。 ウェブサイトの全ページの見つけやすい場所に連絡に関する情報を掲載します。 購入のフローが長すぎる（分かりにくい）。 シンプルなレイアウトにし、入力→確認→完了のようにフローを簡潔にします。 購入時にサイトへの登録を必須にしている。 登録無しでも購入できるようにします。登録を入れる際は最後にオプションでいれます。 サイトの検索機能が役に立
ウェブデザインのタブーをあえて破ってみるための10のTips
ウェブデザインにいつもと違うアイデアを入れてみるための10のTipsをWeb Designer Depotから紹介します。 10 Web Design Rules That You Can Break 下記、各ポイントをピックアップしてお届けします。 はじめに 1. 水平方向のスクロールバーを表示しない 2. フォントの書体は必要最小限の数だけ使用する 3. やたらと多くのカラーを使用しない 4. サイトのゴールを明白にする 5. ナビゲーションは理解しやすいものにする 6. テキストと背景には異なるカラーを使用する 7. コンテンツにはアニメーションを配置しない 8. ウェブ セーフ フォントを使用する 9. スプラッシュ（ランディング）ページを使用しない 10. tableは使用しない はじめに ウェブデザインの進化は、一貫した有用なデザインの保証とともに確立されてきました。そして、あ
優れたユーザインタフェースを設計する際に考慮する8つのポイント
ユーザーにとって有益なユーザインタフェースを設計する際に考慮する8つのポイントをUsability Postから紹介します。 8 Characteristics Of Successful User Interfaces 以下、その意訳です。 ユーザインターフェイスの設計時に、考慮する8つのポイントを紹介します。 Clear Concise Familiar Responsive Consistent Attractive Efficient Forgiving To conclude… 1. Clear 明快 明快であるというのは、最も重量な要素です。 ユーザインターフェイスデザインの目的は、ユーザーに意味と機能を伝え、利用するアプリケーションと相互につきあえるようにすることです。そのアプリケーションがどのように機能するのか、どこに進むべきか理解することができない時は、ユーザーは困惑しが
パンくず詳解 | コリス
パンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイント、クラシックなものや進化したパンくずのショーケースなどをSmashing Magazineから紹介します。 Breadcrumbs In Web Design 以下、その意訳です。 パンくず ナビゲーションは、大量のページを保持するウェブサイトで、ナビゲーション機能を拡張することができます。 パンくずの大きな有用性は、ウェブサイトの訪問者が上の階層に移動する際、少ないアクションで実現させることです。 このことはウェブサイトのセクションやページのファインダビリティ（見つけやすさ）を改善するものとなります。 また、ランディングページ（検索などから訪れた最初のページ）にも非常に効果的で、ユーザーの現在の場所を明示するだけでなく、文脈のヒントとなるインフォメーションも提供します。 What is a bre
サイトマップをフッタに配置する際のポイントとその効果
サイトマップを独立したページとしてではなく、フッタに配置する際のポイントとその効果をWeb Designer Wallから紹介します。 Modern Sitemap and Footer 下記は、その意訳です。 昔はほとんどすべてのウェブサイトで、コンテンツをリストアップしたサイトマップを独立したページとして設置していました。 サイトマップの重要な目的は、ユーザーや検索エンジン（スパイダー）がサイト内の情報を探し出すのに役立つことです。 現在は、多くのモダンなウェブサイトでサイトマップページを設置していません。代わりに、サイトマップをフッタに配置しています。 サイトマップをフッタに設置する効果 クリック数やページビューの増加 ユーザーはページを隅々までじっくり見るわけでなく、スクロールしながらざっと見ることがほとんどです。 そして、多くのユーザーがスクロールして最後に見る場所は、フッタです
サイト公開前に役立つ２５のユーザビリティチェックリスト:phpspot開発日誌
25-point Website Usability Checklist | User Effect サイト公開前に役立つ２５のユーザビリティチェックリストが公開されていましたのでメモしてみました。 サイトの公開前にチェックリストとして使うといいかもしれません。 アクセシビリティ 1. ロード時間が速いか？(60KBぐらいがベター) 2. テキストと背景のコントラスト調整(差異が低く見にくくないか) 3. フォントサイズが読みやすいサイズか？行間、文字間は適切か？ 4. Flashやアドオンは控えめか？ 5. 画像に適切なALTタグが指定されているか？ 6. カスタマイズした404ページがあるか？デフォルトは非常に不親切 7. カンパニーロゴが分かりやすい位置におかれているか？ 8. キャッチフレーズが適切に設定されているか？ 9. 5秒で大体どんな内容が分かるものになっているか？ユーザは
あなたのウェブサイトを高速化する方法 - builder by ZDNet Japan
そして同氏は、世界で最も高速なウェブサイトの1つであるGoogleのパフォーマンスにかかわる仕事をしているのである。 ウェブのパフォーマンスには2つの重要な側面、すなわち効率性と応答時間がある。効率性は、世界ランキング100位に入るようなウェブサイトを構築する際に出てくるスケーラビリティという難問に取り組むための武器である。あなたのウェブサイトが何百万人単位のユーザーと、何十億単位のページビューを擁するような規模のものである場合、バックエンドアーキテクチャ全体に対する理解を深めておくことが重要となるだろう。 ページの速度というものは、HTMLドキュメント内に記述する一連の指示によって決定されると言っても過言ではない。 iGoogleを例に挙げると、バックエンド処理に費やされる時間、すなわちデータがキャッシュされていないために毎回リクエストされることで費やされる時間は、ページ全体の処理時間の
ウェブデザインにおける効果的なコミュニケーションの取り方
ウェブデザインにおける明確で効果的なコミュニケーションの取り方をSmashing Magazineから紹介します。 Clear And Effective Communication In Web Design 下記は、簡潔に意訳したものです。 1. コミュニケーションのアプローチ方法 ウェブサイトの来訪者とコミュニケーションを取るためのアプローチ方法をいくつか紹介します。 テキスト 見出しやコンテンツ内にかかわらず、来訪者はテキストをメッセージとして受け取ります。コミュニケーションにおいて、極めて重要な要素です。 画像 画像は、テキストよりもすばやくメッセージを伝えるときがあります。画像を作成する際は、メッセージを魅力的に伝えられるようにします。 タイトルとヘッダ タイトルとヘッダは、来訪者に主要なポイントと考えを伝える重要で効果的なものです。 アイコン アイコンはウェブデザインの特徴的
ユーザがつい読んでしまう表現方法とは？ (ユーザビリティ実践メモ)
これまで実践メモでは、ウェブライティングの基礎など、ユーザにとって読みやすい文章表現についていくつか考察してきました。 ウェブライティングの記事一覧 今回は、訴求ポイントをFAQ形式で表現することで、ユーザに内容まで読まれやすくする方法をご紹介します。 このサービスでは、ただ子どもを預かるだけでなく、子どもの発達を考えたサービスを行っています。しかし、こうしたこだわりの説明文をコンパクトにすることは難しく、見出しでも曖昧な表現になってしまいがちです。 このページの場合、改善前はユーザは見出し以下の文章まで読まず、独自のサービスを訴求できませんでした。 そこで、特長の説明をQA形式にしたところ、ユーザは文章部分まで読むようになり、他社と違うサービス内容を理解するようになりました。 こういった、QA形式の文章がよく読まれるという行動は、弊社のユーザ行動観察調査の中で多く確認されています。 この
ウェブサイトの第一印象を決める大切な21のポイント
ウェブサイトの第一印象を決める大切な21のポイントをVandelay Website Designから紹介します。 21 Factors that Influence the First Impression of Your Website's Visitors 下記は、それを簡潔にした意訳です。 ロード時間 ロード時間はユーザーをいらいらさせる大きな要因です。少しでも早くロードするように設計をします。 エラーメッセージ エラーメッセージが表示されアクセスができないと、ユーザーは二度とアクセスをしないでしょう。 カラー サイトのデザインは第一印象の重要なファクターです。正しいカラーコンビネーションを使用して、効果的で適切なカラースキームを使用します。 ロゴ もう一つ重要なファクターはロゴです。ブランディングを考慮し、信頼感を与えるロゴを使用します。 ヘッダ ヘッダも強い印象を与えます。魅力
送信ボタンの上にリンクがあればtabindex=-1に | ランサーズ社長日記
いいね！ 1 ツイート B! はてブ 86 Pocket 8 入力フォーム間の移動はマウスで行いますか？tabで移動しますか？ 例えばtabでログインフォームを移動していて、IDとパスワードを入力して、送信ボタンを押そうとする時に、送信ボタンの上にリンクがあって、間違ってリンクを押してしまい、とてもストレスを感じたことはありませんか？ 年始に興味がわくような話題ではないかもしれませんが、ちょっとしたTIPSに。。 ライブドアさんを例に出して申し訳ないのですが、ライブドアさんのログイン画面には「ID・パスワードを忘れた方」というリンクがあります。 パスワードを入力した後にtabを押すと、このリンクにカーソルが当たります。フォーム間の移動をtabで行い、最終フォームに来ると「tab + Enter」が癖になっている人に取って、このリンクを間違って押してしまうことが結構あります。リンク後に戻って
プレゼンにも最適、ページ内のユーザーの視線をシミュレートする -Feng GUI heatmap | コリス
Feng GUI heatmapは、独自のアルゴリズムに基づいて、ユーザーの視線がどのようにページ内で移動するかとその頻度を表示するヒートマップを作成するサービスです。 Feng GUI heatmap Feng GUI heatmapは、実際のユーザーの視線やマウスの動き・クリックを検出するものではなく、独自のアルゴリズムに基づいてヒートマップを作成します。そのため、サーバーのログなどは必要ありません。 フラッシュの場合は、キャプチャした画像（960x640）をアップロードすると生成されます。 ヒートマップを作成するには、３つの方法があります。 オンラインで Firefoxのエクステンションで ViewFinder website heatmap 1.0 ブックマークレットで Feng GUI heatmapは独自のアルゴリズムでヒートマップを作成するので、実際にアップロードされていない
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA*IDEA 〜 とあるサービス運営者が学んだことをまとめるブログ
http://gerenuk.crazyphoto.org/2009/06/25/873/
IDEA*IDEA 〜 とあるサービス運営者が学んだことをまとめるブログ
モバイルサイトを見やすくする絵文字活用&テキストレイアウトのポイント（第3回） | モバイルサイト構築のユーザビリティいろは
