Zapier（ザピアー）とは？便利なタスク自動化ツールの使い方を解説
Zapier（ザピアー）の登録方法 TOPページにて、氏名・メールアドレス・パスワードを入力し「Sign Up」ボタンをクリックします。 アカウントのログインが完了します。 Zapierの使い方 Zapの作成 Zapierでは、サービス同士を組み合わせて作成したアプリを「Zap」と呼びます。ここでは例として、Gmailに届いたZapierからのメールをGoogle Speadsheetに転記するZapを作成します。新規Zapを作成するため「Zaps」をクリックします。 ページ上部の「MAKE A ZAP!」ボタン、あるいはZap一覧の中の「Make a New Zap」ボタンをクリックします。 トリガーの登録 Zapは、トリガーとアクションで構成されます。トリガーが引き金となり、アクションが発生します。トリガーを先に登録します。検索窓に「gmail」と入力し、インスタント検索の選択肢として
UXが重視される時代にデザイナーが価値を高めるには
ユーザー体験をデザインする「UXデザイン」がWebサービス業界の1つのトレンドとして語られる機会が多くなりました。 ユーザーの声がプロダクトに反映されるのが当然の時代において、UXを考慮したデザインは不可欠です。制作物を納品して終わりではなく、ユーザーやクライアントに歩み寄ってプロダクトに関わることが大切です。 しかし、その概念は理解できても、どうやって実務に落とし込むべきか悩んでいる担当者もいるはずです。 2018年6月、アドビ システムズ 株式会社が主催した「UX道場 Meetup 00：UXデザインが高めるデザイナーの価値とワークフロー」のパネルディスカッションから、デザイナーがUXデザインをワークフローに落とし込むヒントを探ってみましょう。 参考： UX 道場（UI / Web デザイン） – Adobe Creative Station 登壇者プロフィール 長谷川恭久(デザイナー
サイトリニューアルにおけるUXの考え方と4つのプロセス
タスク・プロジェクト管理ツール「Jooto」の責任者の下田祐介です。2018年7月18日にサービスを刷新しました。ひとつのSaaSがどのようにしてリニューアルしたのか、そのプロセスと手法の全貌をお伝えします。 これからWebサービスをリニューアルしようとしている方にとって少しでも参考になればと思い、今回ferretに寄稿することにしました。 簡単に紹介をすると、Jootoはかんばん方式のタスク管理ツールです。ユーザー数は10万人を突破していましたが、よりスタートアップらしい成長を遂げるために、2017年9月20日にPR TIMESに事業譲渡し、すぐにリニューアルプロジェクトが始まりました。以下時系列にそのプロセスを紹介します。 リニューアルを決めた理由 調査フェーズ 分析フェーズ 情報設計フェーズ デザインフェーズ この記事で紹介するJootoのリニューアル事例をもとに、自社サービスのリニ
インスピレーションを得よう！ロゴデザインの参考に出来るギャラリーサイトまとめ
最近ではスマホアプリ、Webサービスの増加でロゴ作成の機会も増えてきています。 ニーズも高く重要な要素であるロゴですが、アイデアが浮かばない、どんな手順で作ったらいいかわからないという方も多くいらっしゃいます。 また、実際に作ってみるとどうしてもありがちなロゴになってしまうことも少なくありません。 今回は、ロゴデザインの際に参考にしたいホームページをギャラリー系、参考記事の2つのジャンルから19個ご紹介します。ロゴ作成で悩んでいる、という方は是非デザインのヒントにしてみてください。 ロゴデザインのアイデアにつながるギャラリーサイト 1.logofaves http://logofaves.com/ 大きめのサムネイルがとても見やすいギャラリーサイトです。 1つ1つのロゴが5段階で評価されており、最新、人気順、ランダム、最近お気に入り登録された順で並び替えることができます。 また、ロゴの下に
サンクスページをひと工夫して売上促進！4つの改善ポイント
ネットショップの売上アップ方法を模索する時、コンバージョン(CV)に至るプロセスばかりに目を向けていないでしょうか。広告やランディングページ、入力フォームなどのコンバージョン経路を改善していくのは大切ですが、コンバージョンした後に表示される「サンクスページ」にも目を向けてみましょう。 サンクスページは自社商材に関心を持ち、商品やサービスの購入、申し込みに至ったユーザーのみがアクセスするページです。そのため、メルマガの登録や、おすすめ商品の紹介をすれば、興味を持ってくれる可能性が高いと言えるでしょう。サンクスページを工夫すれば、さらなる売上アップやリピーターの獲得に繋がります。 今回は、「ありがとう」では終わらせないサンクスページの作り方について紹介します。 サンクスページとは サンクスページとは、商品の購入や予約申し込みなどが完了した直後に表示されるページのことです。サンキューページとも呼
意図せずとも使ってしまう「ダークUX」を避けるための3つのポイント
Indeedによれば、国内のUXデザイナーの求人情報は5,000件以上にものぼり、とりわけWebサービスやアプリ開発ではなくてはならない存在となりました。アクセンチュアのUXデザイナーは最大年俸1900万円で募集されており、いかにこのポジションが重要であるかが分かります。 しかし、一口にUXと言っても、ユーザー目線ではなく企業の売り上げ目線でUX設計を行う場合、「ダークUX」に陥りやすくなってしまいます。果たして、「ダークUX」とはどのようなUX設計のことを言うのでしょうか。 今回は、意図せずとも使ってしまう「ダークUX」を避けるための3つのポイントを、実際のダークUXの使用例とともにご紹介します。ダークUXを使い続けてしまうと、最悪の場合ブランドイメージに傷をつけてしまうので、細心の注意を払いましょう。 「ダークUX」とは？ イメージ画像 / BURST ダークUXとは、デザイナーのちょ
熟練デザイナーこそ気をつけたい「コントラスト」に関する3つの話
Webページを閲覧しながら、文字がやや読みにくいな、そう感じたら、コントラスト比が弱いのかもしれません。意外に思われるかもしれませんが、彩度が高いからといってコントラスト比が十分保たれているわけではありません。 普段気にかけない(かもしれない)コントラストですが、コントラスト比が低いと問題も発生します。万人が読みやすいユニバーサルなWebデザインにするには、どうすればいいのでしょうか。 そこで今回は、熟練デザイナーこそ気をつけたい「コントラスト」に関する3つの話をご紹介します。デザイン歴が長くとも意外と見落としがちなポイントもあるので、ぜひ見直しておきましょう。 Webアクセシビリティにおけるコントラストとは？ イメージ画像 / Unsplash *コントラスト比(contrast ratio)*は、一般的に液晶画面について、最も明るい部分(白)と最も暗い部分(黒)の明るさ(輝度)の比率の
【実例付き】ランディングページ制作の「現場」でデザイナーが無視できない5つのポイント
ランディングページは、直接的に購買に結びつける時代を脱し、ユーザー体験や読後感を意識したページも増え、その目的は多様化しています。そのため、数年前では効果的だったランディングページも、目的によってはあまり効果に結びつかない場合もあります。 今回は、デザインの切り口から、ランディングページ制作の「現場」で無視できない5つのポイントを、実例を交えてご紹介いたします。効果的なランディングページを作成するためのポイントを、今一度確認してみましょう。 ランディングページ制作の「現場」で無視できない5つのポイント 1. 1つの具体的で明確な目標を持つ ランディングページで目標を達成するかどうかは、ランディングページの作成前に決まっていると言っても過言ではありません。そのページが何のために存在するページなのか、誰が見ても分かるページにする必要があります。 目標として設定する指標はさまざまなです。ランディ
簡単すぎてびっくり！CSSグリッドをレスポンシブデザインに活用するための詳細手順を紹介
Webデザインを行う際に、複数の閲覧デバイスを想定してデザインを行うのは今では当たり前になっています。オンラインでのWebページの閲覧の4分の3はモバイルなので、モバイルでも快適に閲覧できるように、デザインを考えていかなければなりません。 Webデザインで段組を行う手法はさまざまありますが、現時点で最も手っ取り早いのはCSSグリッドを利用する方法です。CSSグリッドは見た目の段組を想定してコーディングできるので、より直感的な段組を行うことができます。 そこで今回は、CSSグリッドをレスポンシブデザインに活用するための詳細手順を紹介していきます。何かと概念的なCSSグリッドですが、ここでレスポンシブ対応するにはどうすればよいか、まとめておきましょう。 CSSグリッドでレスポンシブデザインを実装しよう イメージ画像 floatやflexboxのような「1次元」レイアウトに対して、「2次元レイア
時間がないデザイナー必見！あっという間に作れてしまうロゴジェネレーター7選
ロゴデザインの相場は、はっきり言ってしまえばピンキリです。一概にこれくらいだと断言するのは難しいですが、概ね5万円から30万円程度です。提案は2案が標準的ですが、提案数が多かったり、担当デザイナーが複数名関わっていたり、商標登録費用込みの場合は、値段が上がる傾向にあります。 参考： ロゴ制作をデザイン会社に頼むといくら？73社の料金表をまとめてみた しかし、商用で利用するのでない場合や、商用だとしてもコストを極力抑えたい場合は、デザイナーにお願いするのは現実的ではありません。実際、ロゴ制作会社の中には50％OFFのキャンペーンを行なっている場合や、2万円前後で制作できる比較的リーズナブルなプランもあります。 最近ではオンラインサービスも普及しており、簡単に自分でロゴを制作することができたり、人工知能(AI)がロゴを提案してくれたりして、そうしたサービスが無料や低価格で利用できることがありま
WordPressの代わりになる！2018年注目の静的サイトジェネレーター6選
WordPressを使ってブログサイトやホームページを作成しているひとは多いかもしれません。しかし、もしあなたにプログラミングの知識が多少なりともあって、SEO上も有利にしたいのであれば、静的サイトジェネレーターを使ってみるのはいかがでしょうか。 静的サイトジェネレーターを使えば、データベースが不要になり、一般的にページの読み込み速度も上がるとされています。汎用的に使えるものからシンプルに使えるものまで幅広く存在するので、用途にあったものが選べます。 そこで今回は、2018年に注目の静的サイトジェネレーターを、概要を中心にご紹介していきます。 サンプルコードなどは、参考として挙げているページをご覧ください。 静的サイトジェネレーターとは？ 静的サイトジェネレーターとは、Markdownなどで書かれたファイルをもとに、静的なコンテンツのテンプレートだけでビルドを行いサイトを作成するためのWe
2018年のデザイントレンド先読み！押さえておきたいUX上の17の予測
UX（ユーザーエクスペリエンス）の定義は時代が経過するにつれて広がっていっていますが、いつの時代でもその意味は*「ユーザー体験」*であり、ユーザー本位でサービスやプロダクトを考えるという根底にあるものは変わりません。 20年ほど前、Windows 97が出た頃の世界と比べれば、UXデザインについて考えなければならないことはたくさんあります。 そこで今回は、2018年に押さえておきたいUX上の17の予測をまとめました。 過去と比べて、これからのUXはどのようになるのでしょうか。あくまでも憶測の範囲が多いですが、読んでみて参考になる部分があれば幸いです。 参考： 今さら聞けない！UI/UXを確実に学ぶオススメの良スライド10選｜ferret UXデザインのことがよく分かる！TED動画厳選5選｜ferret 2018年に押さえておきたいUX上の17の予測 1. コンテンツフォーカスな体験 フラッ
iPhone X 時代のモバイルナビゲーションアイデアに関する3つの考察
ベゼルが究極的に少なくなったiPhone X が登場したことで、デザイナーは新しい局面を迎えているかもしれません。 全画面であるという前提のないモバイルナビゲーションを再構築する時期が迫ってきました。 しかし、まだ11月上旬に発売したばかりで戸惑っているデザイナーの方も多いのではないでしょうか。 そこで今回は、モックアップ投稿サイトDribbleの投稿を参考にした、iPhone X時代のモバイルナビゲーションアイデアに関する3つの考察をご紹介します。 従来のiPhoneの使い勝手とは違うからこそ考えて欲しいことをまとめてみました。 iPhone X 時代のモバイルナビゲーションアイデア 3つの考察 SamsungのGalaxy S8やAppleのiPhone Xのように、ベゼルレスでスクリーンに没入できるスマートフォンは、今後ますます増えて来るはずです。 WebデザイナーとしてWebコンテ
WebデザインでPhotoshopを使う際の活用術9記事
Photoshopは写真の補正をしたり、グラフィックを作ったりとあらゆる作業に活用できる非常に万能なソフトです。PhotoshopはWebデザインにおいても欠かせないツールですが、意外にも使ったことがないという方、試してみたけれど使い方が分からない方も多くいらっしゃいます。 今回は、WebデザインでPhotoshopを使いはじめようとしている方に読んでいただきたい記事をまとめてご紹介します。作業の手順から効率化までしっかりと理解することができますので、参考にしてみてください。 PhotoshopでのWebデザイン作業で読んでおきたい記事まとめ 1.PhotoshopでWebサイトのデザインをしよう｜Webクリエイターボックス http://www.webcreatorbox.com/tech/photoshop-web-design/ Web関連の情報を幅広く届けている「Webクリエイター
box-shadowはもう古い？CSS新時代の「影の落とし方」
長い間Webデザイナーが愛してやまないものの1つに*「box-shadow（ボックスシャドウ）」*があります。 Photoshopのような特殊なソフトウェアを使わなくとも、コードだけで影を落とすことができるという点で、Webデザイナーの中で大変重宝されていたプロパティです。 box-shadowの歴史は長く、2005年時点でW3C内でbox-shadowの草案が発表されました。影を落とす時に、影の長さや角度、色や透明度まで指定することができるので、この技術が登場した当初は感動した方も多いのではないのでしょうか。 しかしながら、box-shadowを使った影の落とし方は、登場から10年以上経過した現在、その使い所を考えていく必要があります。それはブラウザが様々なプロパティをサポートしたことが理由であり、影の落とし方を再考してみるのも大切です。 そこで本稿では、CSS新時代の影の落とし方につい
忙しい時こそ便利！アルゴリズムで画像処理してくれるWebサービス5選
オウンドメディアや自社サイト・自社ブログを運営している場合、記事作成後に画像を挿し込みますが、その画像がやけに粗かったり、もう少し加工したいといったことがあります。 その場合、Photoshopを立ち上げて細かい処理を施す時間があればいいのですが、「もっと短時間で手軽に画像処理を行う方法があるといいな」と思う方は、意外と多くいるはずです。皆さんはいかがでしょうか。 実際、複雑な処理を必要としない際は、Photoshopなどの画像処理ソフトを立ち上げて編集するよりも、かえって画像処理専用のWebサービスを利用したほうが早いということは珍しくありません。特に、最近では非常に便利なWebサービスが増えているので、活用しない手はありません。 そこで今回は、アルゴリズムで画像処理してくれる便利なWebサービス5選をご紹介します。 こうした画像処理サービスの中には、通常の画像処理ソフトでは手が
2018年のトレンドになるかも？今年登場したWebデザインのアイデア7選
Webデザインに関するトレンドは毎年変遷を繰り返しており、トレンドの移行スピードは早まっています。 2016年にはデュオトーンやヒーローイメージを大きく使ったサイト、2017年にはスプリットスクリーンやブルータルなデザインが台頭してきました。 2018年は、どんなWebデザイントレンドがやってくるのでしょうか。 今回は、2018年に試してみたいWebデザインのアイデアをご紹介します。 これから流行しそうなトレンドをいち早く取り入れたいと考えている方はぜひチェックしてみてください。 2018年に試してみたいWebデザインのアイデア7選 1. アシンメトリーなスプリットスクリーン Odai / スクリーンショット：2017年10月 2017年は数多くのホームページがスプリットスクリーンを採用しました。 スプリットスクリーンとは、画面を中央で2分割したように見せ、左右で別々のコンテンツを見せるレ
デザイナー必見！デザインが学べるスライドシェア40選
デザイン業界は常に新しいトレンド・技術が続々登場し、目まぐるしいスピードで変化しています。きっと「常に情報収集を行っている」というデザイナーの方も少なくないはずです。 今回は、ぜひそうした方々に有益な情報をご紹介します。情報収集というと、インターネットや本などを通じてというのをイメージされる方が多いかと思いますが、スライドシェア（Slideshare）もオススメの手段です。 「スライドシェアが何か」というと、プレゼン資料をインターネット上で公開・共有するサービスを指します。良質なスライドが数多く揃っていますので、知識を深めたい方にはもってこいです。今回は公開中のスライドシェアの中でも、特にデザインが学べるスライドを中心にまとめてみました。ぜひ参考にしてください。 デザインの学習にもってこい！デザイナー向けスライドシェア 1. 優れたデザインの 定義と思考方法 https://www.sli
2017年にWebデザイナーが認識しておくべき5つの変化
インターネット関連の技術の進化によって、2017年に入ってWebデザイナーにも新たな変化が訪れようとしています。 これまでにもグラフィックからWeb、デスクトップからモバイル、UIからUXなど、次々にデザイナーが身につけなければならないスキルの種類や量が増えています。 それに加えて、最近ではデザイン思考やプロセスデザインなど、ビジネスのフィールドにおいてもデザイナーの役割が大きく注目されており、デザインを中心に据えた考え方から生み出されるプロダクトも増えてきています。 今回は、2017年にWebデザイナーが認識しておくべき5つの変化をご紹介します。 2017年にWebデザイナーが認識しておくべき5つの変化 1. デザイナーとエンジニアの境界線が消えていく 10年前の静止画的なホームページとは違って、Webサイトを開けば、様々なマイクロアニメーション、インタラクティブなボタンやメニューなど、
UXにも関わる「カラーユニバーサルデザイン」のポイントと事例を解説！
この記事は、2017年2月28日に公開された記事を再編集しています。 ホームページのデザインを考える時、配色はどのように決めていますか？ 利用するユーザーのために*「誰にとっても見やすい色がいい」*と考えている企業も多いでしょう。 そのような企業にとって意識したいものの1つにカラーユニバーサルデザインという考え方があります。 今回はカラーユニバーサルデザインについて、導入するポイントと実際の事例を紹介します。 日本人男性の場合、5％もの人が通常とは見え方が異なる色覚異常を抱えています。カラーユニバーサルデザインとは、このような色覚異常を抱えている人を含め誰にとっても見えやすいデザインを目指すあり方です。 ホームページはユーザーとのコミュニケーションをとる大切なチャネルの1つです。 「誰にとっても見やすく・操作しやすい」デザインを目指すようにしましょう。 参考： 先天色覚異常｜日本眼科学会
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
