【UI/UX改善】CVRを向上させるスマホサイトのポイント10選 | LISKUL
「PCやサイトのスマホ版を作ったけど、思うように成果が上がらない・・・」「どうすれば成果の上がるスマートフォンサイトを作れるのだろうか・・・」とお悩みのweb担当者の皆様へ。 その答えは、「UI/UXの改善」にあります。 多くの企業がスマホサイトで成功していない原因としてありがちなのが「PCサイトを安易にスマホサイト風に変換しているだけ」というパターンです。 そのため、スマホとPCの違いを考慮して、スマートフォンでのユーザー行動を意識したUI/UXに改善するだけでも、CVRは簡単かつ速攻でアップするんです！ そこで、今回はCVRを向上させるためのスマホサイトのUI/UXを改善するためのチェックポイントをご紹介いたします。ぜひ皆様のWebサイトの改善にお役立てください！ サイトUIを改善するための分析手法を知りたい方は、こちらの資料を手元に置いてみてみてください。 ※本記事は2014年7月8
jQueryで1ページごとにスクロールして画面遷移させるUIを実装する方法｜BLACKFLAG
以前、iPhone5sのプロダクトページがリリースした頃に『簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」』と題して1ページをフルスクリーン表示にして、画面全体をスクロールさせることで、1ページ分（1コンテンツ分）を画面遷移させるUIを実装できるjQueryプラグインを紹介しましたが、自分なりにもっと使いやすい形で実現できないかやってみた実験をご紹介してみます。 【2014/08/05 追記】 各ブロック内での横スライド機能を追加しました。 まずは動作サンプルから。 下記のサンプル画面でマウスホイールスクロールもしくは画面右側のナビゲーションボタン等を使って画面（ページ）を切り替えてみてください。 「jQueryで1ページごとにスクロールして画面遷移させるU
ブログデザインをリニューアルしました。前テーマの不満点や改善したポイントなど | RCBlog
昨年11月にWordPressテーマを自作してから数ヶ月が経ち、不満点や改善したい部分が少しずつ出てきました。今回は1からテーマを作るのではなく、その時に作ったテーマを手直しする形でリニューアルしたので、その時の作業の様子や考えていたことをメモします。 今まで使用していたテーマ RCBlog ver.1（トップページのみ見ることが出来ます） 昨年11月に公開して以来、ずっとこのテーマを使用してきました。その当時のことをこちらの記事に残しています。 ブログをリニューアルしました。経緯や、テーマを自作した際のメモなど | RCBlog テーマの不満点 見る物が少なく見える たとえばtwitterのリンクや検索で辿りついたユーザに対して、見せられる物が少ない無愛想なブログだなとふと振り返って感じました。実際このブログの記事はまだまだ少ないのですが、記事が少ないなりにも他の記事にも興味を持ってもら
説得力がグンと上がる！UIデザインの心理学 | クリエイティブ思考 | ブログ | 東京のWeb制作会社・ホームページ制作｜QUOITWORKS Inc.（株式会社クオートワークス）
オライリーから出ている「ユーザーインターフェースデザインの心理学」から使えそうなものを実例を踏まえピックアップ！これでUIデザイン説明の説得力をあげよう！ 情報は一度にすべて見せるのではなく、そのとき必要なものを段階的に開示させた方がよい デザイナーが犯しがちな失敗は一度に大量の情報をユーザーに与えてしまうことです。 情報は一度に大量に与えるのではなく、その時点で必要としている情報だけを与えるほうが様々なニーズに対応することができます。 ユーザーの中には大まかな説明でよい人もいれば、詳細を知りたがっている人もいます。 つまりどういう事？ 情報は一度に見せるのではなく段階的に見せる。 重要なのはクリック回数ではない。クリックのたびに必要な情報が手に入るのであればユーザーは喜んでクリックする。 誰がいつ何を必要としているかを理解する。各段階で何を必要としているか的確に把握していないと、この手法
これ結構使えた！サービスサイトやWordPressテーマで使われている小技まとめ
作成：2014/05/19 更新：2014/11/01 WordPress > ウェブサービスサイトや最近のWordPressテーマで使われているエフェクトや小技をまとめました。今回またjQueryが多くなってしまいましたが、サイト制作時に一手間加えたくなる小技集です。 エンジニア速報は Twitter の@commteで配信しています。 もくじ サイト読み込み時 １．画像読み込み時、ローディング画像を表示／jQuery ２．読み込み時に文字を動かす／jQuery ヘッダー ３．文字の拡大・縮小／jQuery ４．入力補助／jQuery ５．伸縮するサーチボックス／jQuery コンテンツ ６．中心に水平線を入れる／CSS ７．均等に並べる／段組み／CSS ８．コンテンツが現れた時にアニメーションさせる／jQuery ９．マウスホバーで画像を拡大しキャプションを出す／jQuery １０．マ
【デザインまとめ】綺麗なデザインの管理画面 40種類
今日は管理画面のデザインを、まとめてみました。いつもより多めな40種類です。トレンドを反映してか、フラットデザインが多いですね。 通常の静的なサイトのデザインとは異なり、投稿がある場合無い場合とたくさんのパターンを考えながら制作しなければならないので、デザイン力が問われます。これらを日本語に置き換えるとまた違って見えたりするのですが、ひとまず、ご参考になればと思います。 ▼ The Kamarel デモサイト ▼ Apricot Bootstrap デモサイト ▼ The Vira デモサイト ▼ Cameo デモサイト ▼ DefOne デモサイト ▼ Pixit デモサイト ▼ AdminEx デモサイト ▼ Odin デモサイト ▼ Minimal デモサイト ▼ Delighted Flat デモサイト ▼ Tisa Premium デモサイト ▼ Adminre デモサイト ▼
新規顧客を逃さないECサイトデザイン
新規顧客を逃さないECサイトデザインECサイトの構造はとっても複雑。ユーザーは好みの商品を検索し、その中から実際に購入するものを比較・検討・選択、さらにフォームに入力するというプロセスを経て、ようやく購入完了となります。オンラインショッピングに慣れている私でも、新規サイトでは苦労することが多いです。そこで使いやすいECサイト、特に新規客に優しいサイトデザインとはどんなものなのか、考えてみました。 目的の商品ヘ素早くアクセスEC サイトはスピード勝負だとよく言われています。それはページの読み込み時間という体感速度はもちろんですが、いかに簡単に目的のページに到達できるかも大切です。特に何が欲しいのか決まっているというユーザー層は、急いでいるわけではありませんが、そのサイトに長居するつもりはありません。目的の商品を素早く表示するのはもちろん、色や型などが一致しているかどうかを判別しやすくするため
見栄えがよくなった！Web制作するなら知っておきたいjQueryプラグインまとめ
作成：2014/05/7 更新：2014/11/01 Web制作 > ギャラリーサイトやECサイトなどで、最近よく見かけるデザインやエフェクトなど、制作前に知っておくと助かる、「どっかで見たことあるけど何だっけ？」といった感じのjQueryプラグインや最近のトレンドなるものをまとめました。ページにちょっとした工夫を凝らしたいとき、動きのある仕掛けでキャンペーンサイトを作りたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ メニュー １．フィーチャーリスト ２．スティッキーヘッダー 画像エフェクト ３．マウスオーバーで画像にキャプション ４．イメージビューア ５．ズームインエフェクト ６．ブラーエフェクト スクロール ７．Infinite Scroll(無限スクロール) ８．画像シーケンス ９．横スクロール １０．フリック機能 レイアウト １１．画面全
これが読みやすいブログデザイン！有名サイトの記事幅と余白設定を大公開 | セオリコ
ブログのメインは記事本文。どんなにタイトルで惹きつけて訪問者を増やしても、肝心の記事が読みづらければ最後まで読まれないうちに離脱してしまいます。当然、シェアもしてくれないしリンクもしてくれません。 では読みやすいブログとはどのようなものでしょうか。そのひとつは、「流し読みしやすい文章」です。 読みやすいブログ記事を書くための基本とライティングテクニック 文章の改善はいますぐできることではありませんが、読み疲れさせないデザインにするのはすぐに実行できるかもしれません。 本記事では、記事本文が表示されるメインコンテンツの幅と、周囲の余白設定に焦点を絞って解説していきます。 有名どころ 18 サイトを調べて、各サイトがどれくらいの幅で記事を表示し、どのくらい余白をとっているのか調べてみました。ぜひご参考に。 2014 年に調査・公開した数値のため、参考サイトの内容が変わっている場合があります。
Webらしいニュース配信UIとは
紙的な情報配信 新聞記事は、印刷されたらそれで終わりです。後の紙面で修正・注釈が入る場合がありますが、記事が世に出た瞬間、そのままのかたちで残ります。また、配信できるタイミングと回数が限られているので（朝・夕、時々号外）、期限までにどれだけ記事の質を高めるかが勝負になることもあると思います。新聞社の Web サイトは、こうした『新聞の性質』を強く残したまま Web コンテンツを配信しているように見えます。 カテゴリやキーワード（タグ）を活用した情報分類をするなど、 Web の特性を活かした手法を取り入れているものの、記事を集めた書庫のような存在です。以前紹介した公共施設の Web サイトと似たような状況といえるでしょう。新聞社の Web サイトの記事の特長をみると、記事の形状は、紙の時代とほぼ変わりないことが分かります。 配信された記事は、そのままの形で残る 訂正や追加情報が入る場合はある
使えそうなニュース特集ページを考えてみました
とりあえず良い兆候がみえはじめた南オセチア紛争。グルジアは小さな共和国ではありますが、ワイン発祥の地としても知られており、以前キンズマラウリというワインを購入したこともあって、知っている国ではありました。それ以上のことはあまり知らなかったわけですが、今回の紛争を聞いたときはびっくりしました。 当然のごとくウェブで情報を集めるわけですが、日本のニュースサイトではどうも良い感じにまとまったページというのがありませんね。「特集」というページが設けられていますが、新着順で並んでいるだけですし、概要を知るにも深く知るにも、物足りない感じがします。結局 Google ニュースへ行くこともありますが、すべての記事が平面上に並べられているので、これはこれで不便だったりします。 文句を言うのは簡単なので、いったい何が課題でどうすると (少なくとも) 自分にとって便利な時事関連の特集ページになるのか考えてみま
【 バナーデザイン・アーカイブ ★★★ 】 - 様々なバナーのデザインを一覧でチェック！
バナーデザインをまとめたサイトです。様々なバナーのデザインをサイズや色から選んで一覧でチェック！バナー作成の参考にご活用ください！
みんなのミシマガジン｜ミシマ社のウェブ雑誌
日曜日にハレトケ市というイベントに「ミシマ社の本屋さん」として出店しました。遠方からわざわざこのイベントめがけて来てくださった方も多く、どの方もみなさん、ミシマ社の本を大切に読んでくださっていて、とてもうれしかったです。一夜明けて、昨日はもろもろの片付けを。私の隣の席でスミちゃんが、電卓パチパチ、小銭をジャラジャラ...ここだけの話（なのか？）、本もたくさん売れ、↑の通りお金の管理もきっちり、ばっちり。いろんな意味で気持ちのいいイベントでした。京都メンバーのみんな、おつかれさまでした！ （担当：長谷川実央） ニック・ホーンビィ ハヤカワepi文庫 昨年、私の人生最大の師が鬼籍に入り、その前後で本がほぼ読めなくなってしまったときに唯一読めたのがニック・ホーンビィの本だったため、とにかくニック・ホーンビィに助けを求めまくり、片っ端から読みまくりました。そのホーンビィ祭りに突入するきっかけになっ
ヴィジュアル要素の表現方法
ヴィジュアル要素をつくるときに使えるような、表現方法をまとめてみました。 メインビジュアルなどをつくるとき、うまく思いつかず困ってるんだよねーって方の参考になるかな、と思います。 ヴィジュアルの表現方法としては、大きく分けて以下の2種類があります。 ■直接的な表現 人・物・動物・タイポグラフィなどそのものを主役に置いた表現。 ■間接的な表現 抽象的なメッセージを主役に置いた表現。「たとえ」や「見立て」の技法を使う。 今回は、間接的な表現の中でどんなものがあるか、修辞技法をもとにまとめてみました。 言葉だけ聞くと難しく感じるのですが、普段私たちが話し言葉でも良く使っているものですので、理解しやすいと思います。 比喩 直喩法 直喩（明喩、シミリー）とは「（まるで・あたかも）～のようだ（ごとし、みたいだ）」のように、比喩であることを読者に対し明示している比喩である。 「修辞技法」（2011年12
レスポンシブデザインを制作するなら頭に入れておくべき基本事項7つ | 株式会社LIG
どうも〜こんにちはぁ！ 最近レスポンシブなサイトを作ることが多いライターの、のび太です。 モバイル、タブレットユーザーが最近どんどん増えてきているので、Web制作者にとってレスポンシブなサイトが作れるってことが必須になるんじゃないかなぁ〜って感じますね。 レスポンシブデザインを制作するときに意識しなきゃいけないことはいろいろありますが、今回は「これはぜったいに知っておきたいよね！」って感じた基本的なことを7つご紹介させていただきたいと思います。 レスポンシブデザインを制作するときに意識しておきたい基本項目7つ 1. 画像の代わりになるべくCSSで表現すべし レスポンシブデザインで画像を使うと、モバイル端末ではPCに比べて回線速度が遅いため、読み込み時間が余計にかかってしまいます。 そのため、画像ではなくCSSで表現可能なものはどんどん代替していったほうがいいと思います。 立体ボタンや矢印だ
14 Amazing Free Photoshop .psd Resource Sites | Speckyboy - Wordpress and Design
In addition to creating your own web design from scratch, you can also download free pre-designed web design PSD templates for Photoshop. These templates are a great starting point for businesses or designers who are short on time or operating on a small budget. They’re also a fantastic opportunity for novice web designers to learn and understand new web design styles and techniques. Whether you’r
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
とらのあな通販ではデビットカード使えなくてちょっと不便だった - euphoLab
株式会社アラタナは株式会社ZOZO・株式会社ZOZOテクノロジーズへ吸収合併致しました。
WPZOOM Demos
プラグインやチュートリアル 25
