ホームページの印象を左右するファーストビューの改善ポイント
せっかく検索やリンクを経由してホームページに訪れてきてくれたのに、最初の1ページ目を見てすぐにどこかへ行ってしまう。 このように、ホームページに集客ができてもなかなかコンバージョンにつながらず悩んでいるWeb担当者も多いのではないでしょうか。 この場合ユーザーは、「このホームページには自分が求めている情報はない」と判断している可能性があります。このホームページには自分にとって有益な情報が載っていると思ってもらえるホームページ作りを目指すべきでしょう。 今回は、好印象を与えるためのファーストビュー改善ポイントを解説します。 ファーストビューとは 「ファーストビュー」とは、ホームページにアクセスしたときにスクロールせずに最初に目に入る部分になります。 Webサイトのトップページをイメージするかもしれませんが、検索エンジンからアクセスしているのか、ソーシャルや広告からアクセスしているのかなど、訪
エンジニアやデザイナーにおすすめのChrome拡張機能5選
GoogleのChromeストアでは、便利な機能を持つ拡張機能が数多く提供されています。 業務内容にあわせて自分に最適なツールをインストールすれば作業効率アップが期待できますが、拡張機能の数が多すぎてどれをインストールしたらよいのか迷ってしまうことはないでしょうか。 今回は、エンジニアやデザイナーをはじめとしたWeb開発業務の方におすすめのChrome拡張機能5選を紹介します。便利なものは取り入れて、作業を効率化して行きましょう。 エンジニアやデザイナーにおすすめなChrome拡張機能5選 1.DevTools Theme: Zero Dark Matrix Chromeウェブストア 「DevTools Theme: Zero Dark Matrix」は、Google Chromeデベロッパーツールの視認性を高めてくれる拡張機能です。 Google Chromeのデベロッパーツールは、デフ
サイトリニューアルにおけるUXの考え方と4つのプロセス
タスク・プロジェクト管理ツール「Jooto」の責任者の下田祐介です。2018年7月18日にサービスを刷新しました。ひとつのSaaSがどのようにしてリニューアルしたのか、そのプロセスと手法の全貌をお伝えします。 これからWebサービスをリニューアルしようとしている方にとって少しでも参考になればと思い、今回ferretに寄稿することにしました。 簡単に紹介をすると、Jootoはかんばん方式のタスク管理ツールです。ユーザー数は10万人を突破していましたが、よりスタートアップらしい成長を遂げるために、2017年9月20日にPR TIMESに事業譲渡し、すぐにリニューアルプロジェクトが始まりました。以下時系列にそのプロセスを紹介します。 リニューアルを決めた理由 調査フェーズ 分析フェーズ 情報設計フェーズ デザインフェーズ この記事で紹介するJootoのリニューアル事例をもとに、自社サービスのリニ
Adobe XDでワイヤーフレーム制作するなら知っておくべき機能｜ferret [フェレット]
Webディレクターの仕事において、非常に大きな比重が置かれるワイヤーフレーム制作。皆さんはどのソフトウェアを使っていますか？ 多くの企業のPCに導入されているPowerPointをワイヤーフレーム制作に利用している方もいるかもしれません。Adobe XDといったワイヤーフレーム作りに特化したツールを使うとより作業が楽になり便利になります。 今回は、Adobe XDでワイヤーフレーム制作するなら知っておくべき機能について特徴を踏まえつつ解説していきます。 Adobe XDとは Adobe XDは、アドビ システムズ 株式会社が提供しているアプリケーションの1つです。Webサイトやモバイルアプリのワイヤーフレーム制作、デザインに適したアプリケーションです。 PowerPointやIllustratorなどと同じ様に図形や文字、画像などを使ってページの構成、サイトデザインを作成できます。 Ado
![Adobe XDでワイヤーフレーム制作するなら知っておくべき機能｜ferret [フェレット]](https://cdn-ak-scissors.b.st-hatena.com/image/square/8bc0eb4954e819f7e70ccfa075c8c16de7e2687a/height=288;version=1;width=512/https%3A%2F%2Fferret.akamaized.net%2Fuploads%2Farticle%2F10585%2Fog_image%2Fdefault-fa3d5d1dd26098b04b86477a87dee843.jpg)
顧客対応の属人化を防ぐ！共有メールボックスが使えるサービス7選
仕事をある担当者が抱えてしまって、その担当者でないと案件の詳細が分からなくなってしまう、という事態を*「仕事が属人化してしまう」*といいます。顧客対応の現場でも、担当者が複数いる場合は、お互いにどんな対応をしているかが分からなくなってしまうケースはよくあるようです。 しかし、チームで仕事をしている以上、顧客対応も属人化から解放されたほうがよい、と考えているマネージャーもいるでしょう。その場合には、共有メールボックスが使えるサービスの導入から始めてみてはいかがでしょうか。 今回は、共有メールボックスが使えるサービス7選をご紹介します。似たようなサービスでも使い勝手が異なるため、自社のニーズに合ったものを探してみましょう。 なぜ共有メールボックスを使うべきなのか？ 問い合わせ窓口用としてのメールを設置している企業はほとんどだと思いますが、あなたの会社ではどのようなワークフローで問い合わせを処理
熟練デザイナーこそ気をつけたい「コントラスト」に関する3つの話
Webページを閲覧しながら、文字がやや読みにくいな、そう感じたら、コントラスト比が弱いのかもしれません。意外に思われるかもしれませんが、彩度が高いからといってコントラスト比が十分保たれているわけではありません。 普段気にかけない(かもしれない)コントラストですが、コントラスト比が低いと問題も発生します。万人が読みやすいユニバーサルなWebデザインにするには、どうすればいいのでしょうか。 そこで今回は、熟練デザイナーこそ気をつけたい「コントラスト」に関する3つの話をご紹介します。デザイン歴が長くとも意外と見落としがちなポイントもあるので、ぜひ見直しておきましょう。 Webアクセシビリティにおけるコントラストとは？ イメージ画像 / Unsplash *コントラスト比(contrast ratio)*は、一般的に液晶画面について、最も明るい部分(白)と最も暗い部分(黒)の明るさ(輝度)の比率の
Photoshopが不要になる！？無料で使える画像編集ツール「Photopea」
SNSの投稿用画像や自社のホームページへ掲載する画像など、画像編集を行う機会はノンデザイナーの方でも少なくありません。 デザイナーの方であればPhotoshopやIllustratorなどを駆使して画像編集を行いますが、ノンデザイナーの方は高額なツールを購入するのはハードルが高いのではないでしょうか。 今回は、会員登録不要でハイクオリティな画像編集ができる無料ツール「Photopea」の基本的な使用方法を紹介します。 Photopeaとは Photopea | Online Photo Editor Photopeaは、無料で使用できる画像編集ツールです。 オンライン上で利用できるため、インストールは不要です。また、ログインや会員登録も必要ありません。 Photopeaは、完全無料にもかかわらず多くの機能を兼ね備えていることが特徴です。ファイルは、PSD、XCF、ANY、sketch対応し
Googleアナリティクス、データ保持設定の背景と方法
Webサイトを運用するうえで、個人情報をどう扱っていくかという問題は無視できないものです。技術アップデートが進み、顧客体験の向上を感じる一方で、個人のデータをどう活用し、守っていくかという課題もあります。 2018年4月、Googleから、Googleアナリティクスのユーザー宛に、個人データの取扱に関するメールが送信されました。その中で、特にユーザーの注目を集めたのが、「データ保持期間」の設定です。 新しく追加されるこの設定は、Googleアナリティクスのサーバーに存在する一部のデータの保持期間を変更するものです。これを受けてWeb関係者の中では「データが消失してしまう！」といった様々な憶測や情報が飛び交い、混乱を招きました。 Googleアナリティクスを利用しており、どう対処すれば良いのかと悩んでいる方も多いと思われます。 よって今回は、この設定が追加された背景と、設定方法を解説します。
iPhoneの自動化アプリ「Workflow」をさらに便利に使えるオリジナルレシピ7選
WebページをPDF化したり、今読んでいるブログのURLをコピーしてTwitterに貼り付けたりと、日常的なルーティーンは誰しもあるはずです。もしその決まり切った作業が*「たった3分」程度だとしても、それが「たった数秒」*になったらどうですか？ Workflowを使えば、たったの1タップであらゆる工程を自動化することができます。しかも、想定以上に様々な工程を自動化できるためその効果に驚くほどでしょう。 今回は、iPhoneの自動化アプリ「Workflow」の底力を引き出すためのオリジナルレシピ7選をご紹介します。レシピは自分で作成することもできますが、やはり便利な定番レシピを入れておくのが間違いありません。気に入ったレシピはすぐに追加できるので、ぜひチェックしてみましょう。 Workflowとは？ https://workflow.is/ Workflowは、iOSのさまざまな標準機能まで
STP分析のやり方とは？メリットや注意点、成功事例を解説
STP（エスティーピー）分析とは、「セグメンテーション」「ターゲティング」「ポジショニング」から構成されるマーケティングの分析手法です。STP分析を実施することで、自社や商品・サービスの立ち位置を明確化できます。 定番のマーケティングフレームワークですが、特にマーケティング初心者の方は何から始めていいかわからない方も少なくありません。 そこで、STP分析の基礎知識とSTP分析を行うメリット・注意点、成功企業事例について解説します。STP分析と併せて活用したいフレームワークも紹介するので、ぜひ最後までご覧ください。 STP（エスティーピー）分析とは STP分析とは、「セグメンテーション（Segmentation：市場細分化）」、「ターゲティング（Targeting：狙う市場の決定）」、「ポジショニング（Positioning：自社の立ち位置の明確化）」の3つの英単語の頭文字をとって名付けられ
カスタマージャーニーマップとは!?無料テンプレート付き
ペルソナの行動を時系列で1枚にまとめた「カスタマージャーニー」を目にしたことはないでしょうか。企業がゴールとする地点までにペルソナが取る行動は、時系列で刻々と変化します。接触ポイントによって彼らが取る行動が変化するため、必然的にアプローチの方法も異なる、ということです。 組織やチームでこの「さまざまなペルソナの行動」に共通認識をもち、ペルソナという実際には見えない対象を明文化するために、カスタマージャーニーは欠かせません。 今回は、カスタマージャーニーを作成する際に最低限知っておきたいポイントをご紹介します。カスタマージャーニーを作成するなら、最低限の基礎知識として必ず押さえておきましょう。 カスタマージャーニーとは 画像引用：https://www.digitalgov.gov/2015/08/12/journey-mapping-the-customer-experience-a-us
参照元が計測できない？ノーリファラー(direct/none)になる原因とは
Web担当者の多くがGoogle アナリティクスをトラフィック分析に活用していますが、何かと疑問に思われることが多いのがノーリファラーです。 なんとなくダイレクトのアクセスと認識している方もいるかもしれませんが、実際はノーリファラーになるのはさまざまケースがあります。 トラフィック分析を行う上で「参照元が無い」ことを意味するノーリファラーはどのような扱い方をすれば良いのでしょうか。 リファラー/ノーリファラーとは Google アナリティクスでは、サイトに訪問したときの参照元（リファラー）情報が計測できます。「デフォルトチャネルグループ」では、たとえばSNSからの流入は“Social”、外部サイトからの流入は“Referral”、検索エンジンからの流入は“Organic Search”に自動で分類され、どの流入元からサイトに辿り着いたのかが分かります。 「デフォルトチャネルグループ」は「集
2018年最新版！手軽なのにユニークなCSSフレームワーク4選
CSSは、標準規格でもさまざまなことが行えるようになりました。最近では*「The best CSS framework is NO framework.」(一番のCSSフレームワークはフレームワークを使わないことだ)*という言葉さえ生まれているほどです。 確かに、レスポンシブ対応にしたり、簡単な設定を行うだけであれば、標準のCSSで設定してしまうほうがかえって楽なのかもしれません。言い換えれば、レスポンシブ対応で、とっても簡単だと、同じような特徴ばかりのCSSフレームワークは淘汰されていくことになるでしょう。 そこで今回は、手軽なのにユニークでやたらと便利なCSSフレームワーク5選をご紹介します。使うべき必然性が見つかる、ユニークなフレームワークばかりなので、ぜひ利用を検討してみましょう。 手軽なのにやたらと便利なCSSフレームワーク5選 1. これ以上ないほどに超軽量「lit」 http
Google（グーグル）フォームが便利になる「知っておきたい」アドバンステクニック5選
GoogleはWebサービスからアプリ、プロダクトに至るまで、様々なものを世の中に送り出しています。その中でユーザーやチームメンバーの声を集約するのに一役買ってくれるサービスの1つがGoogleフォームです。 フォームはHTMLの知識だけではなく、サーバー側の知識も必要になるため、初心者がフォームを作成するのは敷居の高いものでした。しかし、Googleフォームを使うことで、誰でも簡単に高度なフォームを作成することが可能です。 しかも、Googleフォームは非常に汎用性が高くカスタマイズできる余地が存分に残されているため、基本的な使い方だけでなく、応用テクニックを知っておくと便利な場面もすぐにやってくるはずです。 そこで今回は、Googleフォームが便利になる「知っておきたい」アドバンステクニック5選をご紹介します。どれも便利で、使い方を覚えれば簡単に操作できるものばかりです。ここで、仕事で
Web開発者必見！高速でCSSレンダリングが可能なFirefox Developer Editionとは？
昨年、Web開発者を震撼させた、新しいブラウザが登場しました。 その名も、Blisk。 このブラウザは、モバイルとデスクトップの両方のレイアウトをリアルタイムで確認でき、テストやバグの修正まで行えるので、開発者にとってはありがたい存在でした。 一般のユーザーが普通のブラウザでネットサーフィンをするのとは違って、開発者はブラウザに別の機能を求めています。 ユーザーエージェントを簡単に切り替えたり、ハッキングしてさまざまなパーツをテストしたり、デバッグを行ったり、パフォーマンスを確認したり、CSSを書き換えたり。 こうした一連の作業を、一つの統合されたツールで行えるとしたら、どうでしょうか。 それを可能にしたのが、この度リリースされたFirefox Developer Edition(別名Firefox Quantum)です。 このブラウザは開発者向けに最適化されているので、開発者であれば使わ
GitHub Desktop：初心者でも分かる、易しい使い方
GitHubは、バージョン管理システム「Git」の仕組みを使って、世界中のプログラマーが自分の作品を保存、公開することを可能にしたサービスです。 オープンソースでの開発にはなくてはならないものであり、GitHubがなければ開発が進まないと考えている人もいるほどです。 数年前からは「GitHub Desktop」というデスクトップ用のアプリケーションも提供されており、様々なサービスがより簡単に扱えるようになりました。 今回は、バージョン1.0として正式にリリースされた「GitHub Desktop」の使い方を解説します。 （追記：2020年5月12日（米国現地時間）に最新版 GitHub Desktop2.5がリリースされました。） GitHub Desktopを提供する、GitHubとは？ スクリーンショット：2017年5月 まずは、GitHubとは何かをおさらいしておきましょう。 Git
意外と便利？Mac標準ブラウザの「Safari」が快適に使えるオススメ拡張機能10選
Macを利用している方の中で、初期設定時以外は「Safari」を利用したことがない方もいるのではないでしょうか。 ブラウザの使用率をまとめた「NetMarketShare」の調査によると、世界のブラウザ使用率の中で、Safariは3.87％と非常に低いデータが発表されています。対して、Googleが提供するChromeは、59.38％と約6割にのぼる圧倒的な使用率とのことです。 実は、Mac標準のブラウザ「Safari」も十分にメリットがあります。ChromeやFirefoxと比べれば拡張性に劣りますが、シンプルなブラウザでありながら快適に利用するための拡張機能が揃っています。 今回は、Safariで利用できるオススメの拡張機能を10種まとめました。この機会にぜひ試してみてはいかがでしょうか。 参考： Browser market share Safariを快適に使うためのオススメ拡張機能
SVGファイルとは？基礎知識と作成・変換方法を解説｜ferret [フェレット]
多くのホームページが活用している「SVG（エスブイジー）ファイル」。具体的にどの様なフォーマットなのかご存知でしょうか。 SVGファイルのメリットは、拡大縮小しやすく編集性・汎用性が高いこと。でも「何となく使っている」「実はあんまりどのようなものか知らない」「なぜSVGなの？」と感じている方も少なくないでしょう。 そこで本記事では、SVGの特徴やその他のフォーマットとの違い、作成方法などについて詳しく解説します。 SVG（エスブイジー）ファイルとはなにか？ 「SVGファイル（スケーラブル・ベクター・グラフィックス、Scalable Vector Graphics）」はの歴史は意外にも古く、2001年頃に勧告された技術です。 SVGとはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス)の略で、一種の画像フォーマットになります。 引用元：今こそ取り組むS
![SVGファイルとは？基礎知識と作成・変換方法を解説｜ferret [フェレット]](https://cdn-ak-scissors.b.st-hatena.com/image/square/c1044997c38f72020170dae282a443ce6cd7864c/height=288;version=1;width=512/https%3A%2F%2Fferret.akamaized.net%2Fuploads%2Farticle%2F8445%2Fog_image%2Fdefault-d8edf2f9b5b2b651d90216773c15980f.png)
Chromeでは物足りない方に最適！高機能ブラウザ「Vivaldi」の使い方
StatCounterによる世界Webブラウザシェア1位の変遷を見ると、2010年以前には「Internet Explorer」が60%以上を占めていたものの、2017年3月時点では、高速・シンプルで差別化してシェアを伸ばした「Google Chrome」が52%を占めています。 参考： Browser market share Worldwide | StatCounter Global Stats 一方で「Internet Explorer」や「Google Chrome」ほど利用されてはいないものの、機能性に優れたブラウザは多数存在します。 そのうちの1つが、Chromeよりもさらに柔軟なカスタマイズが可能な「Vivaldi」です。 今回は、「Vivaldi」のインストール方法から基本的な利用方法を解説します。 Chromeのカスタマイズ性に物足りなさを感じている方は一度利用してみる
【保存版】remにvh、mozmm…あまり知られていないけれど知ると得するCSSの単位まとめ
「この単位、なんだ？初めて見た・・・」 CSSが初めに登場してからかなりの時間が経過していますが、CSSに触れている経験が長いひとでも、一度はこのように思ったことがあるのではないでしょうか。 CSS歴10年以上の方でも*「長さの指定にはpxしか使わない」*という人も珍しくはありません。 実際、CSSは小さな仕様変更を繰り返しており、W3Cの草案作成・勧告といった正式なプロセスを経て便利な単位やプロパティは続々と追加されています。 CSSにおいて、単位を操ることができれば、デザインやレイアウトを行う上でかなり幅が広がることになります。 これから紹介するように、CSSにはすでにさまざまな単位がありますが、知らなかったがために回り道をしてしまっていた、あるいは知っていたらもっと短く書けるコードも多く存在します。 今回は、あまり知られていないけれど知ると得するCSSの単位をまとめていきます。 単位
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
