タグ

web制作に関するmauaのブックマーク (19)

  • ユーザビリティ実践メモ

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

  • A/Bテストで素人が陥る罠: 神が宿るというディテールよりも先に…… | Moz - SEOとインバウンドマーケティングの実践情報

    ジェイソン・コーエン氏が6月に公開したA/Bテストに関する記事は、もっと注目を集めていいし、もっと詳しく掘り下げられるべきだ。オンラインマーケティングの世界にいる人間ならたいてい、クリックスルー率、会員登録率、コンバージョン率などを改善できるA/Bテストの威力を知っている。ページを訪問した人が望ましいアクションを起こす割合を高められるというのは、すばらしいことだ。 しかし、テストの仮説を立ててから、立案、開発、実行へと至るプロセスには、危険が満ちている。そして、いちばん目立たないが最も油断ならない落とし穴の1つが、実はテストの対象として何を選択するかなんだ。 グラフで見る「極小値」問題 ランディングページの各要素をテストするというのは確かに面白いし、やる価値がある場合もある。しかし、ランディングページや製品ができたばかりの段階では、適切でないことが多い。実際に、上の図にあるように、グラフに

    A/Bテストで素人が陥る罠: 神が宿るというディテールよりも先に…… | Moz - SEOとインバウンドマーケティングの実践情報
  • [CSS]フォームの新規開発と既存カスタマイズ用のフレームワーク -Formee

    クロスブラウザ対応で、あらゆるデザインに柔軟に対応可能なフレキシブルでカスタマイズに優れたフォームのフレームワークを紹介します。 Formee - Fresh baked forms for your websites! デモページ Formeeは新規にフォームを作成する際だけでなく、既存のものをカスタマイズする際も想定して作成されたフレームワークです。 既存のフォームのセレクトボックスを下記のようにスタイリッシュに変更することも簡単です。

  • ランディングページは第一印象で差をつけろ! ユーザーを逃さないキービジュアルの選び方

    『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day

    ランディングページは第一印象で差をつけろ! ユーザーを逃さないキービジュアルの選び方
  • MdN Design|総合情報サイト

    Web制作において、Webディレクターが取り組んでいかなければならないWebマーケティングとは一体どのようなものか。今回はWebマーケティングの基礎として全体像とフローの概念を軸にして、プランニングの進め方の手順やペルソナ手法などについて解説していく。 文=田口真行((株)デスクトップワークス)

    MdN Design|総合情報サイト
  • ipadで何かを企んでいる方向けのデザインテンプレート集「iPad Templates and Stencils」

    TOP  >  Design , Photoshop  >  ipadで何かを企んでいる方向けのデザインテンプレート集「iPad Templates and Stencils」 国内外で話題を読んでいるAppleが発表したipad。今までにない位置づけの端末で、様々な方面で期待されていますが、今回紹介するのはipad向けのアプリやサービスをいまのうちから考えている人のためのipad開発者向けのデザインテンプレート集「iPad Templates and Stencils」です。 iPad Stencil for Omnigraffle by iA 待ち受け画面、キー入力の画面、ボタンやパーツなどなど、ipadの様々なシーンの素材がまとめられています。様々な素材が集められていますがいくつかピックアップして紹介したいと思います。 詳しくは以下 ■iPad PSD GUI by Teehan +

    ipadで何かを企んでいる方向けのデザインテンプレート集「iPad Templates and Stencils」
  • Photoshopのトーンカーブで階調補正するチュートリアル – creamu

    Photoshopでトーンカーブをうまく使いたい。 そんなときに参考になるのが、『How To Use Curves in Photoshop』。Photoshopのトーンカーブで階調補正するチュートリアルです。 S字カーブで補正する方法や、ヒストグラムを見て補正する方法などが、実例とともに紹介されています。画像にマウスオーバーすると、トーンカーブを適用した状態が見られるのでわかりやすいですね。 一度見てみてください。 How To Use Curves in Photoshop 朝方まで作業してしまったけど今日もがんばります。

  • webサイトのリピーターを増やすさりげない5つのコツ

    多くのビジネスサイトのアクセス数を支えている大手検索サイト、YahooGoogleのアルゴリズムが変わる事で、突然商売がひっくり返る事態を回避する方法。 Yahooサーチエンジンのアルゴリズムなんかによく泣かされた事があったけど、webサイトっていうのは結構リピーターを作りやすく施工しておく事で、あまりそういった影響をもろに受けずにすみます。 webサイトと、エンドユーザーとの道。 ユーザーパイプライン。 これを整備しておくと、サーチエンジンの気ままなアルゴリズムの変動がきても、涙目になる事もないのです。 パイプラインを作る意味 ビジネスサイトにおいて、いったい何が重要なポイントになるかというと、多くの場合、そのほとんどがリピート率と検索エンジンからの訪問者数となります。 リピート率が高いサイトは比較的物が売れやすく、また、検索エンジンからの訪問者数が多いと売るためのチャンスがほかのサイ

    webサイトのリピーターを増やすさりげない5つのコツ
  • 50 Hot New Tutorials (Part2)

    Tutorials can often be your greatest source of inspiration when trying to design that project you have been putting off. In this post, I have rounded up a collection of very useful tutorials from around the web from the month of February. You’ll find everything from a super easy neon style in photoshop, to creating a stylized first aid icon in illustrator. So what are you waiting for…why not try o

    50 Hot New Tutorials (Part2)
  • 味気ないデザインを一新!使いやすい検索ボックスを作る6つの方法

    2017年6月29日 Webデザイン, ユーザビリティ ついついデザインはあとまわしになりがちな検索ボックス。少し手を加えるだけで素敵なデザインに!またユーザビリティについてもちょっとした工夫でもっと使いやすくなります。ユーザビリティ向上のためのコツとデザインの素敵な検索ボックスを紹介します! ↑私が10年以上利用している会計ソフト! 検索ボックスをもっと使いやすくする 1. 誰が見てもすぐ見つかる場所に ヘッダーやサイドバーの一番上など、ページを開いたときにすぐ見つかる場所に設置すると見つけやすいです。特に意図のない場合はコンテンツに混ぜたりフッターに設置するのは避けた方がよさそうです。 2. テキストボックスの背景色 デフォルトのテキストボックスの色が白のため、背景色はつけず白にしておいたほうがユーザーにとっては見つけやすいです。背景が白の場合はボーダーに線を入れたり、目立ように違う背

    味気ないデザインを一新!使いやすい検索ボックスを作る6つの方法
  • クールなCSSグリッドフレームワーク – creamu

    CSSのフレームワークを使ってサイトを作りたい。 そんなときにおすすめなのが、『ZURB』。クールなCSSグリッドフレームワークです。 カラム数や幅を指定して、CSSを生成できますね。Screen Widthを変えて確認することもできて、なかなかいい感じです。 似たサイトだと、960 Grid Systemがありますね。 こちらは制作事例も多く、参考になるのではないでしょうか。デザインの制約を受けそうですが、コーディングの手間を多少減らしつつデザインする、ということができそうです。 一度見てみてください。 ZURB CSS Grid Builder ここ数日夜はちゃんと寝るようにしているので体調がいい。この調子でいきます。

  • 新着記事

    『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。

    新着記事
  • 40 Extraordinary Photoshop Text Effects | Pro Blog Design

    40 Extraordinary Photoshop Text Effects On Mon 8th Mar | In Resources | By Narendra.s.v 110 The trouble with Photoshop Tutorials is that there are a lot of them out there, but you only want the very best, most creative ones. In this post, we’ve collected 40 of the very best and most extravagant tutorials for working with type. After working through a few of the most appealing looking ones to you,

  • 用途は色々、Photoshopでリアルなセロファンテープを描画するチュートリアル:phpspot開発日誌

    How to Create Scotch Tape in Photoshop Free Photoshop Tutorials | PhotoshopStar 用途は色々、Photoshopでリアルなセロファンテープを描画するチュートリアル。 次のようなとってもリアルなセロファンテープを描画できます。単に写真を載せるよりもアナログ感が出せていい感じですね。 デザインなんかにも応用できそうですね。 関連エントリ プロレベルのPhotoshopチュートリアル集 2009年の凄いPhotoshopチュートリアル100種

  • AdWords 初心者によくある 17 の間違い | グーグル アドワーズ ラボ

    3月 9, 2010 | PPC広告全般 AdWords の代行業務などでアカウントの運用を引き継ぐ場合、みんな同じような間違いをしていることに気が付きます。 それに加えて、フォーラムの質問をみていると AdWords で上手くいってない理由が、パターン化されているのが、何となく分かってきたので、リストアップしてみました。 いきなりビッグキーワードを買う いきなり大量のキーワードを買う いきなり高額な単価を設定する 完全一致と部分一致を理解していない状態で AdWords をはじめる コンバージョンの設定をしない コンテンツネットワークの存在を知らない状態で AdWords をはじめる 検索ネットワークとコンテンツネットワークを同一のキャンペーンで管理する グループ分けをしない(全てのキーワードを同一グループで管理する) 全てのグループで同じ広告文を使用する(検索ネットワーク) 広告のタイ

  • モバイルユーザビリティ改善のチェックポイント保存版 - 全10回総まとめ(最終回) | モバイルサイト構築のユーザビリティいろは

    2009年1月から連載してきた「モバイルサイト構築のユーザビリティいろは」も今回で最終回です。そこで今回は、今までの連載内容をおさらいしながら、モバイルサイト構築時におさえておきたいモバイルユーザビリティの総まとめをします。 前半では今までのおさらいをし、最後に自分でモバイルサイトのユーザビリティを改善するためのポイントを紹介します。 モバイルサイト構築時の基チェックポイント公式サイトに関するポイントモバイルメールマガジンに関するポイントモバイルECサイト構築時のポイントモバイルFlashサイトの制作ポイント自分でできる! モバイルユーザビリティ改善の3ステップモバイルユーザビリティ改善のケーススタディ1. モバイルサイト構築時の基チェックポイント1-1. モバイル端末ならではの制約や特性を理解するモバイルサイトには、画面サイズや1ページで表示できるページ容量制限、キャリアごとの違いな

    モバイルユーザビリティ改善のチェックポイント保存版 - 全10回総まとめ(最終回) | モバイルサイト構築のユーザビリティいろは
  • 直帰率を下げるには? ユーザーが直帰する4つの理由 | ウェブ力学

    自分のサイトの直帰率が気になって、直帰率を下げたいと考えている人は多いのではないでしょうか? そこで直帰率を下げる方法を単刀直入に説明したいところですが、その前にまずユーザーが直帰する理由を知る必要があります。直帰率と一口に言っても直帰する理由はユーザーごとに異なり、対応策もその理由によって異なるからです。極端な話、直帰率が高くても問題が無いケースだってあります。 ここでは、ユーザーが直帰する理由を4つに分類して対応策をまとめてみました。あなたのサイトの直帰率が高い原因はどれに当てはまるかチェックしてみてください。 反射的に「違う!」と判断される そのページを訪れたユーザーが内容をほとんど見ずに、反射的に直帰してしまうことがあります。こういった滞在時間の短い直帰はコンテンツの内容以前の問題であり、早急に改善する必要があります。 原因としては、「デザインが極端に稚拙」、「レイアウトがブラウザ

  • Illustratorで文章を扱うとき(文字組版) - DTP Transit

    Illustratorで文章を扱うとき、矩形エリアに文字を流し込んだままではなく、次の4点は、最低限設定します。 行送りの設定 均等配置(行頭行末揃え/ジャスティファイ) 禁則 文字組み(約物前後や和欧間のスペースの設定) 逆を言えば、Illustratorではポイントテキスト(文字ツールでクリックして入力したテキストオブジェクト)を前提としています。 デフォルトの[行送り]は、文字サイズの175%に設定されています。「(14.4pt)」のように()付きで表示されているときには「自動」行送りになっています。1行あたりの文字数に応じて調整します。 CS以前のIllustratorや、バージョン互換を行ったドキュメントによっては自動行送りが欧文に準じた120%になってしまいます。120%では行送りは狭すぎます。日語では150-190%程度に設定します。 [段落]パネルの[均等配置(最終行左揃

    Illustratorで文章を扱うとき(文字組版) - DTP Transit
  • img(画像)には文字色を指定しよう(そう、文字の色を) | 初代編集長ブログ―安田英久

    今日は、Webページの作り方に関して、ちょっとした細かい話を。ページに画像を入れるときに、imgタグの「文字の色」をCSSで指定しておきましょう。画像に文字色? と思ったあなた、ちゃんと理由があるのです。 なぜ画像なのに「文字の色」を指定しなければいけないのでしょうか。それは、画像が表示されない状態では画像のaltテキストが表示されるため、その状態での表示をおかしくない状態にするためです。 念のために説明しておくと、altテキストとは、imgタグで画像の簡単な説明をテキスト記述するものです。HTMLの用語では「alt属性」と呼ばれ、img要素には必ず記述することとされています。altテキストはふつうにブラウザでページを見ているときには関係ありませんが、画像を解釈できない検索エンジンや視覚障害者が使うテキスト読み上げブラウザにとっては、そこに何が示されているのかを理解するのに重要です。 しか

    img(画像)には文字色を指定しよう(そう、文字の色を) | 初代編集長ブログ―安田英久
  • 1