Webデザイナーや開発者など、Webプロフェッショナルの仕事を支援してくれるWebツール＆サービスを厳選して紹介します。 pCloud、xFive、Themifyなど、選出したツールやサービスの大半は高い評価を得たソリューションで、さらに改良が進められています。Goodie、Codesterなど一部は登場したばかりのものですが、すでにすばらしい仕事ぶりです。 1. pCloud 4年前にローンチさ…

元の記事

インタビューの仕方を知っていますか？ 準備不足でインタビューに臨んでしまうと、うまく会話が進まなかったり、内容の薄い記事になってしまったりすることがあります。事前に準備するポイントと、質問のコツを紹介します。 近年、企業は顧客の課題の解決方法として商品紹介のみならず、さまざまな情報をコンテンツとして発信しています。数多くあるコンテンツのひとつに、インタビュー記事があります。 今回は、インタビューを…

元の記事

レスポンシブWebデザインの実装に欠かせないメディアクエリを使わずに、CSS GridとFlexboxでレスポンシブなレイアウトを実装する方法を紹介します。 レスポンシブなレイアウトにはメディアクエリが欠かせないわけですが、CSS GridやFlexboxを使えばメディアクエリなしでもレスポンシブなレイアウトが可能です。メディアクエリが全くいらなくなるということはないと思いますが、CSS Grid…

元の記事

私が編集者として最も喜びを感じるのは、ほとんど実績のない新人ライターの才能を発掘し、いっしょに成長するときです。「大丈夫かな？」と思いながらもドキドキワクワクする緊張感は、初恋のようでもあります。 もちろん、見込み違いで…

元の記事

「今そこにいるユーザーに広告を見せる」のが位置情報連動型広告だと思っていませんか？ 現在の主流は過去の位置情報からユーザー像を描き出しターゲティング配信する「プロファイル方式」です。詳しく解説します。 プログラマティック広告の高度化に伴い、最近また進化が進み、期待が高まっているアドテク分野の1つとして「位置情報連動型広告」があります。外出先でスマホで調べものをしていたら、閲覧サイト上に近所のお店や…

元の記事

言わずと知れた、顧客分析の黄金フレームワークであるRFM分析。 しかし、調べてもRFM分析の具体例はほとんど見つからず、出てくるのは当たり障りのない解説記事ばかりではないでしょうか。 とてもシンプルで強力な分析手法ですが…

元の記事

サイト全体の統一感やクオリティの底上げへと繋がるスタイルガイド。まだ作ったことがない方に、スタイルガイドのメリットと考え方、サンプルを紹介します。 デザイナーの方は経験がないでしょうか？ 案件のサイト制作が進むにつれて「あれ、パーツにばらつきがあるな…」「この動きじゃないのに…」「もっと早くエンジニアに伝えていれば…」ページが出揃いだしてから微妙な差異に気付いたり、納期直前で指摘しづらくなってしま…

元の記事

新しいCSSレイアウト仕様Grid Layoutを使うには、これまでのCSSレイアウトの考え方を変える必要があります。どう考えていけばよいのでしょうか？ 最近、ようやくCSS Gridを学びはじめてるんですけど、学ぶ課程で「CSS Gridが”普及”するとBootstrapやFoundtionのようなフレームワークの作り方も変わるんだろうなぁ」と考えています。 どう変わるのかというと、まずは、 基…

元の記事

人気のプロトタイピングツール「InVision」がますます進化しています。最近のアップデートで追加された機能「Inspect」も紹介します。 プロトタイピングツールは、実際にWeb制作を行う前にモックを作成し、完成形をイメージしやすくするためには欠かせないツールです。 今回は、プロトタイピングツールとして世界で大きなシェアを誇る「InVision」を紹介します。 InVisionとは InVisi…

元の記事

デスクトップでやっていたことを、そのまま小さい画面に詰め込んでいるだけのモバイルWebサイトやアプリも多く、飛躍的な改善はあまり見られません。改めて考えたい、モバイルで実現すべき体験とは何でしょうか？ Conversions@Google 2017 でのルーク・ロブルースキー氏のプレゼン「Mobile in the Future」にすごく感銘を受けたのでここでもシェアします。ルーク氏はモバイル・フ…

元の記事

デザイナー、エンジニア、マーケターの「掛け算」のスキルアップを応援するパスファインディング・メディア「WPJ」が2017年に公開した記事は、500本あまり。HTMLやJavaScriptのチュートリアルから、UXデザイン、ネット広告のトレンド解説記事まで、読者によく読まれた記事ベスト10を紹介します。 【1位】もう実機は不要!? Chromeのモバイルエミュレーターがとんでもなく進化していた Ch…

元の記事

オウンドメディアとはそもそもオウンドメディアとは、どういう定義なのでしょうか？ 英語のOwned Mediaがそのまま用いられていますが、直訳すると「所有されたメディア」となります。テレビ局や新聞のように、広告主とコンテンツを制作する部署が独立した関係であるのとは異なり、企業や組織が自分たちの情報を発信するため、自分たちで所有しているメディア、という意味になります。Webの世界では、2012年頃か…

初めてReactに挑戦するとまずつまずくのは開発環境の設定です。Facrbookが提供しているCLIツール「Create React App」で簡単に始める方法を解説します。 Reactの新規プロジェクトを始めるには、コードを書いてアプリケーションを形にするだけではなく、ビルドツールでローカル開発環境を整え、ユニットテストをしたあと、最終的にビルドします。思っているほど簡単ではないと感じる方に、簡…

元の記事

ユーザーの目線でWebサイトを作ることは基本中の基本ですが、グローバルサイトを担当することになったら日本の常識を捨てて現地の状況を理解する必要があります。 アプリやWebサイトをより良く、より速く、よりアクセシブルにする手助けが私の仕事です。CalibreでWebを構築したり、メンテしたりする際にぶつかる課題について、知見が集まりました。 この1年で本当に驚いたことは、一般のユーザーがどうインター…

元の記事

Amazonのすごさは圧倒的な品揃えとスピードだけではありません。ECサイトのUXデザインを考える上で参考にしたい、基本的な手法を紹介します。 Amazonのビジュアルデザインが劣悪で時代遅れだと、多くのデザイナーやUXエキスパートが同意するでしょう。それなのにAmazonからUXを学ぶ記事に違和感を抱く人もいるかもしれませんが、まずは読んでください。 Amazonのビジュアルデザインに改善の余地…

元の記事

Googleが提唱する「プログレッシブWebアプリ（PWA）」。そのコンセプトを理解し、実装に反映するには「アプリ感覚」の体験を実現することが必要です。ポイントを紹介します（PWAの入門記事も併せてどうぞ）。 グーグルのZach Cochが「Webとアプリの境界線はこれまでになくあいまいになっています」と述べたように、Webはかつてなく改良され、「高速なリッチアプリ感覚」の驚くべき体験を創出できる…

元の記事

開発者ならお気に入りのツールやワークフローがあると思いますが、他の開発者のツールややり方も気になりますよね？ そこで、11人の著名なPHP開発者に、よく使うツールやワークフローを伺いました。 開発者はプロジェクトの最終成果物を完成させるために自分なりのプロセスを編み出しています。そのプロセスには、試行錯誤の末にたどり着いたツールが含まれます。「プロセス」と「使うツール」が決まると、ワークフローが完…

元の記事

Webデザイナーにとってもっとも身近なプログラミング言語といえばJavaScriptですよね。ところがいざ勉強を始めたものの挫折してしまった…という人のために、典型的な失敗例と学習のコツを教えます。 JavaScriptの学習をしても挫折する人の多くは、「JavaScriptは分かりにくい」「自分はWeb開発に向いていない」と言います。悲観的になってあきらないでください。アプローチの仕方を変えるこ…

元の記事

納期を守れない開発者がいたとしたら、プロジェクトの進め方を改善することで解決できるかもしれません。生産性を向上させるアプリを紹介します。 工程を立てて、毎日の作業内容と作業量を決めたのに、終わってみれば未完成のリストが残っただけ。あの時間はどこにいったのかと途方に暮れる。よくある話です。 この記事では、仕事の生産性を向上させるツールを「タイムマネジメント」「チェックリスト」「スケジューラー」「プロ…

元の記事

10月17日に配信が始まった「Windows 10 Fall Creators Update」に導入された、マイクロソフトの新しいデザイン言語「Fluent Design System（フルーエントデザインシステム）」。コンセプトと実装へ反映する方法を解説します。 独自のデザイン言語やGoogleのMaterial Design（マテリアルデザイン）など既存の言語を実装して、統一のとれた堅牢なユー…

元の記事