タグ

改善とWebデザインに関するteroma2のブックマーク (16)

  • 脳に優しいデザインを!「Vertical Rhythm」の基本と実現方法 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    こんにちは、デザイナーの王です。 どうも近頃はいぬ肌が恋しく、無性にワンコちゃんをなでなですりすりしたくてうずうずしるのですが・・ こういう写真を眺めているだけで心がほわ~っとしてきますよね 久しぶりに記事を書きます。「Vertical Rhythm」と呼ばれているデザイン手法ご存知でしょうか?さり気なく取り入れることで、文章が読みやすくなったり、レイアウトが整ったりすることが期待できるという。 デザインに限った話ではないが、完璧な正解など存在しないと思うので、あくまで一つの考え方として捉えて頂ければと思います。 実例を挙げながら進めて行きますので、「Vertical Rhythm」の考え方とその良さ、便利さをきっと理解してもらえるんじゃないかと思います。 前書き クライアントに「説得力のあるデザイン」を届けよう! LIGでデザイナーをやってて、よくベテランデザイナーさんにこういう風に言わ

    脳に優しいデザインを!「Vertical Rhythm」の基本と実現方法 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
    teroma2
    teroma2 2015/01/16
    行間サイズとコンテナの縦の長さは全てベースユニット(18px)の倍数になっているのだ!縦の空間を18pxごとに分割し、それの倍数になるように、margin、padding、line-heightを微調整、これが「Vertical Rhythm」
  • richmarketing.jp

    richmarketing.jp 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy

    richmarketing.jp
  • UXの視点でフォームのユーザビリティを改善する | Digital experience University

    Webサイトのフォームは会話と同じです。信頼関係を築く前にプライベートな質問をすると、相手を不快な気持ちにさせてしまうでしょう。 FacebookのようなSNSに参加して友人と交流したい、オンラインショップから知り合いにお祝いのお花を送りたい、仕事プロジェクトマネジメントツールを利用したいなど、Webサイトを訪問するユーザーには様々な目的があります。サービスを利用する前に必ず必要となってくるのが、「フォーム」の入力。入力項目が多い、何度も何度もエラーが出る、などユーザーにとって高いハードルとなっているフォームも数多くあります。Webサイトの運営者は、「フォームはユーザーの目的を達成するために必要不可欠なプロセスだ」ということを改めて認識し、ユーザーがストレスを感じることなくフォーム送信を完了できるかどうか見直してみましょう。 ユーザーと会話するフォームをデザインしよう ユーザーがフォー

    teroma2
    teroma2 2014/03/07
    購入を決心していないユーザー(まだ試したい程度)の個人情報の扱い方には注意を払うべき「住所や電話番号は、必要となった段階で理由を明確にして入力してもらえばいい」
  • ユーザビリティの高い、使いやすいフォームを制作するための12のポイント

    Li'l Engineのエントリー「ユーザビリティフォームのためのチェックリスト」の意訳で、ユーザビリティの高いフォームを制作するための12のポイントの紹介です。 Checklist for Usability Forms 不明な箇所は英文のまま記載してましたが、皆様の協力により3,5を和文にしました。 フォームは正しく入力できるように、可能な限り簡潔に。 フォームには、必要なインフォーメーションを含める。 タイトル:なんのためのフォームか フォームのヘルプ キャンセル(中止)の選択肢 入力すべき項目は、多くしない。 重複する入力項目は設置しない。 フォームの公開後しばらくしたら、収集したデータが実際に使用されているかチェックする。利用されていないものがあれば、収集しないようにする。 長いフォームは紛らわしいので、分ける。 タスクごとに分ける それぞれのページごとにチェックをし修正すること

  • ScaleOut | Supership

    2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 件に関する詳細は、プレスリリースをご確認ください。

    ScaleOut | Supership
  • リンク色を意識するだけでクリック率を大幅に上げる2つの戦略 | セミリタラボ

    アフィリエイトで4億円超を稼ぎ40代で夢だったセミリタイア生活へ!今までの経験を活かしてネットビジネスや副業資産運用節約術などブログで発信中 バナーボタンの色、アンカーテキストの色を変えるだけで大幅にクリック率を上げることが出来るかもしれません。日は大手サイトが行った実験を2つご紹介します。 こんばんはーマメボーです。 日は、このブログのバナーボタン色について、 「何故緑を使っているのか?」って、 質問がありましたのでご説明したいと思います。 気が付かれた方は鋭いな~って思ってしまったのですが、 私のサイトのほとんどのボタンは緑で統一してます。 一応こんな感じです↓↓↓ レビューサイトへの入り口 メルマガの案内 購入ボタン 一瞬、ただの緑好きな感じにも見えますが・・・ 一応根拠があってやってるんですよね(●´ω`●) それが、かなり前ですが書いた記事です。 ⇒アフィリエイター必見!

    リンク色を意識するだけでクリック率を大幅に上げる2つの戦略 | セミリタラボ
  • 【UI調査】iOSとAndroidのスイッチ 7種類比較

    最近、アプリオでは、スイッチのユーザビリティについての記事を2掲載した。 【|と◯】知ってる? アプリや電機のスイッチと電源ボタンの記号の意味 【UI調査】スマホ・アプリのスイッチの意味をユーザは理解できているのか? いずれの記事も反響が大きく、スイッチのユーザビリティ(使い勝手)に対する読者の関心が高いことが分かった。 iOSとAndroidのスイッチ比較 そこで、一連の記事をまとめる観点から、アプリオ編集部がスマホユーザにアンケート調査を実施した。有効回答数は80件(7番のみ40件)。 実際にiOSやAndroid OSの設定画面やアプリ内で使用されているスイッチの画像を見せ、「スイッチを左に動かした場合」の結果を3つの選択肢(ON・OFF・分からない)の中から選んでもらった。 各スイッチ画像に関して回答者に与えた情報は、スイッチの画像のみ。まずは、同じ条件で、以下の結果を確認してほ

    【UI調査】iOSとAndroidのスイッチ 7種類比較
  • コラム一覧|ビービット(beBit)- エクスペリエンス・デザイン・パートナー

    コラムの前編では、昨今eNPS℠が重要になってきていること、また、eNPS℠には「正当な報酬」・「正当な評価」・「顧客への貢献実感」が影響していることを述べました。 コラムでは、仕事の役割が見える「部署」を切り口に、eNPS℠の比較を行い、そこからeNPS℠を高めていくための方法について考察・ご紹介します。 「中国のデジタルサービスが進んでいる」「中国のCX/UX※1が優れている」そんな評判や記事を最近多く耳にするようになりました。また、Alibaba傘下のAnt Financialが、Harvard大学から「先進的かつ再現可能」なビジネスとして評価され、Harvardビジネススクールの企業事例集に取り上げられたことは記憶に新しいニュースです。 コピー商品や、「安かろう悪かろう」の製品のイメージが根強くあった中国。しかし、そのような「偏見」はもう昔のことです。中国は今、デジタルを活用し

    コラム一覧|ビービット(beBit)- エクスペリエンス・デザイン・パートナー
  • ユーザビリティ実践メモ

    スマートフォンとともにタブレット端末の普及率はますます上昇し、最近では街中や電車などでタブレット端末を利用している人を多く見かけるようになりました。 この記事の続きを読む

  • 「今のレスポンシブWebデザインは誤解されている」英の著名デザイナーAndy Clarke氏が話す3つの修正点 - エンジニアtype

    「今のレスポンシブWebデザインは誤解されている」英の著名デザイナーAndy Clarke氏が話す3つの修正点 2013/05/31公開 《Fashionably Flexible ワークショップレポート》 2013年4月6日に、Web Directions East主催による、Andy Clarke氏のワークショップが東京ミッドタウンで開催された。その内容を、主催であり通訳をした菊池崇がレポートをする。 ■ Andy Clarkeって誰? 世界的に著名であるものの、日では一部のコアなWebデザイナーでないとその名を知らない人がいるので、まずはAndy Clarke氏について紹介したい。 Andy Clarke はイギリスのウェールズ地方在住のWebデザイナーである。1990年代後半より、Webサイトの制作をはじめ、そのデザインセンスとCSSの先進性を活かしたデザインの取り組みで注目を浴

    「今のレスポンシブWebデザインは誤解されている」英の著名デザイナーAndy Clarke氏が話す3つの修正点 - エンジニアtype
  • seo-matome.jp

    This domain may be for sale!

    teroma2
    teroma2 2013/02/04
    検索エンジンは<p>タグに囲われた<img>タグを理解しないので<div>で囲う。
  • seo-matome.jp

    This domain may be for sale!

  • リッチスニペットで検索結果をより分かりやすく

    日、リッチ スニペットという新機能の提供を開始しました。米国では今年5月から提供していましたが、日、他国よりも早く日が 2 ヵ国目として提供を開始します。 Google の検索結果では、「スニペット」と呼ばれるページの説明文をタイトルの下に表示しています。スニペットは、ユーザーが検索結果からページへ飛んだときに、どのような情報が閲覧できるのかを示すものです。 これに対して、今回提供を開始したリッチ スニペットは、製品のユーザー評価(レビュー)など、通常のスニペットよりも更に多くの有益な情報を検索結果に表示します。例えば、ページのタイトルの下に「ユーザの総合評価」、「レビューの件数」、「価格帯」、などの情報も盛り込んでいます。みなさんはそのページにどのような情報が含まれているのか、より正確に素早く把握できるようになり、効率良く探しているページにたどり着くことができるようになります。 こ

    リッチスニペットで検索結果をより分かりやすく
  • SEO for スマートフォン [2] レスポンシブWebデザイン

    前回記事『SEO for スマートフォン [1] Google のモバイルに対する考え方』の続きです。今回はレスポンシブWebデザインに対する考え方について。 レスポンシブWebデザインは検索順位的に有利なのか? Googleが2012年6月に「Building Smartphone-Optimized Websites」という文書を公開して、スマートフォン対応サイトを検索エンジンに最適化させる方法についての Google の意見が表明されました。 この文書について、「Googleで検索順位を上げるためにはレスポンシブWebデザインを採用しなければならない」あるいは「レスポンシブWebデザインにしないと、順位が上がらなくなる」という間違った解釈をしているWeb制作会社やSEO会社を見かけます。これは大きな間違いです。 たとえば先に紹介した文書の冒頭を見ても、"Google supports

    teroma2
    teroma2 2013/01/11
    本当にレスポンシブWebデザインで良いの?と迷った時に読むべき記事
  • インフォメーション・アーキテクチャ(IA)について

    インフォメーション・アーキテクチャ(IA) 前職で恥ずかしながらお客さんから聞いて初めて知った言葉です。 僕はWebサービスやスマートフォンアプリの開発に関してUI/UXへのこだわりを強く持っていますが、この言葉の存在を知ってから、その上位の概念に位置する情報アーキテクチャの設計こそが最も重要だと考えるようになりました。 下手なことを言うと突っ込まれそうなので嫌なのですが、僕はIAの設計とはWebサイトで言うサイトマップを作成する作業に近いと捉えています。 UIの設計に至るまでには、大きく以下のような3ステップがあると思います。 1)どんな機能/コンテンツが必要か洗い出す 2)それらをどうまとめるか考える 3)定義したまとまりの中で各機能/コンテンツの見せ方を考える IAの設計とは、この流れでいう2)にあたる部分です。 ※これがしっかりとできていると、経験上3)の作業はかなりスムーズに進行

    teroma2
    teroma2 2013/01/09
    既存アプリの構造を見直すためにまずできること
  • CSSとJavaScriptどちらでも実装できるけど、どのように使い分けるのがよいかの解説

    CSSでもJavaScriptでもできるけどどちらを使おうか、CSSJavaScriptどのように使い分ければいいのだろうか、二つのうまい関係を構築するテクニックを紹介します。 Building A Relationship Between CSS & JavaScript 下記は 各ポイントを意訳したものです。 はじめに スタイルの定義はCSSで:JavaScriptからCSSを遠ざける ユーザエクスペリエンスを犠牲にしないで使い分ける CSSJavaScriptの使い分けの大切なポイント はじめに JavaScriptには数多くのライブラリ、jQuery, Prototype, Node.js, Backbone.js, Mustacheなどあり、非常に人気が高いです。これらは実際に非常に多く利用されており、時間をかければもっとよい方法があるかもしれないところでもそれらを使ってしま

  • 1