厳しい経済環境のもと、クライアントもより確実な成果が見込めなければ、企画を実施することはありません。 ここでは、クライアントの課題解決に貢献するアイデアをどのように通していくのか? そのための有益な時間配分、タイムスケジュールについて言及していきます。
ある企業の担当者が、絶対に役立つと思われるコンバージョンテストを実施した。 サイトを訪問者のなかから製品デモの依頼申し込みを増やすために、ある製品ページを新しい魅力的なデザインに変更し、昔ながらのA/Bテストを実行したのだ。そのページを訪れた人の半数には以前と同じ製品ページを表示し、もう半分にはこの魅力的な新しいデザインのページを表示するようにした。 1か月間テストを行った結果、期待どおり、コンバージョン率は2%から10%にアップした。素晴らしい成果だ! そこで担当者は、この結果を上司に報告。テストの結果に従ってすべての製品ページを新しいデザインに移行したいと訴えた。そして、上司のゴーサインをもらった。 ところが、新しいデザインのページを本格的に公開したところ、製品デモの依頼が減り始めたことに気づいた。 だが担当者は、この減少は季節的な要因かもしれないと考え、数か月間様子を見た。すると今度
はじめまして、上塘です。 これから何週かに渡って「企画を通すコツ~オリエンからプレゼンまでの時間の使い方~」というお題でコラムを書くことになりました。僕は、大学生の時にアメリカに渡り、また日本に戻ってきて、外資系広告代理店などで戦略プランナーを6年くらいやって、4年前にゼンコミュニケーションデザインズという会社を作って現在に至ります。 かれこれ10年くらい、この業界でメシを食ってきました。宣伝会議さんとは、以前から企画講座の講師としてお付き合いがあった関係で、今回このコラム執筆のお声をかけて頂いた次第です。僕の講座に参加されたことがある方は、ところどころ“すでに聞いた話”が混じるかもしれませんが、どうぞご容赦ください。 まず、白状しておきます。 僕がこれから書くコトは、すべて“カミトモ式の方法論”になります。世間や業界で広く認知されている“常識的で安全な方法論”とは、少し異なります。という
モバイル向けナビゲーションデザインには、さまざまな形やスタイルが登場しています。すべてのナビゲーションメニューが同じ構造であれば、ユーザーにとっても直感的で分かりやすいかもしれませんが、現実はそれほど単純ではありません。 独自の問題を抱えたモバイルアプリは、ナビゲーションメニューのデザインによってそれらの問題を解決することもできます。たとえば、7〜8つほどの主要メニュー項目がある場合はおそらくハンバーガーメニューを採用し、3つほどのメニュー項目の場合はタブバー形式を実装するかもしれません。 デザイナーが製品やユーザーのために最適化したナビゲーションメニュー設計では、クリエイティブで画期的なデザインがいくつか見られます。今回は、ナビゲーションメニューを作成するときに参考にしたい、革新的な実例サンプル例をまとめてご紹介します。 ハンバーガーメニューが進化中!2018年に押さえておきたい最新トレ
便利なツールがどんどんリリースされています。 一から作成するとなかなか面倒なレスポンシブ対応のHTMLメールを簡単に作成できる無料のオンラインツールを紹介します。 デザインもさまざまなテンプレートが用意されており、主要なメールクライアントすべてをサポートしています。 Topol.io Topol.ioはHTMLメールのフレームワーク「MJML」をベースに作成されており、さまざまなメールクライアントで見栄えがよいHTMLメールを簡単に作成できます。 さまざまなデザインのHTMLメールを作成できる Topol.ioの使い方は簡単です。 登録など面倒なことは不要で、HTMLメールを作成し、ダウンロードできます。 まずは、サイトにアクセスし、「Start Designing」ボタンをクリックします。
Illustrator がもっと簡単に、楽しくなる無料ベクター素材をまとめています。 オールジャンルの素材が揃っており、どれもベクターなので自由に編集、加工することができるスグレモノ。急なイラスト発注や納期までギリギリ、といったときにも活躍してくれる便利アイテムです。 アナログな素材の風合いや、味のある質感を表現できるビンテージ素材、さくっとオシャレなロゴを作成できるキット、人気の水彩ペイント、キラキラの黄金スタイルなど実用的な無料ベクター素材が揃います。Illustratorがより便利になるお気に入りアイテムを探してみてはいかがでしょう。 Illustratorをもっと面白くする!すごい無料ベクター素材30個まとめ 2016年4月度 大人ナチュラルな西海岸スタイル!無料の手書きイラスト、文字フォント素材集 Illustrator の即戦力!デザイン力がアップする無料ベクター素材まとめ I
日頃からさまざまなウェブサイトを制作しているデザイナーにとって、新しいクリエイティブなデザインアイデアを考えるのもワークフローのひとつ。 今回は、カスタマイズもしやすい無料のUIコンポーネントをまとめてご紹介します。Photoshopだけでなく、IllustratorやSketch、Adobe XDなど幅広いデザインアプリに対応でき、ウェブサイト制作の参考にしたい素材を集めています。また、どの素材も文字テキストや配色、サイズの変更などを自由に行うことができ、iOS 11など最新デザインにもばっちり対応しています。 作業ペースが上がる!ブックマークしておきたい無料UIデザイン素材40個まとめ Photoshopで編集ラクラク!Webサイト用の美しい無料PSDテンプレート45個まとめ 使いやすくて、分かりやすい無料UIコンポーネント素材まとめ HomeMade iOS App UI モバイル向
今回は、eコマースサイトにおいてそれぞれの商品の販売状況を見ていく方法を解説する。 実際の販売状況については、おそらくGoogleアナリティクスとは別のeコマースの販売管理システムでも当然分析できる環境にあるだろう。ただし販売管理システムでわかるのは「いつ何が売れた」という結果だけだ。そこから「なぜ」をひも解いたり、「これからどうすればよいか」を考えたりするヒントは得にくい場合もある。 Googleアナリティクスでも売上データを取得していれば、何か疑問があった場合はGoogleアナリティクスのデータを見ることで、eコマースサイト内での閲覧行動やオンライン上での集客施策との関連性を確かめることができる。「なぜ売れたのか」または「売れなかったのか」「どうしたらもっと売れそうなのか」という仮説検証から、具体的な集客施策や商品ページの改修のヒントを見つけて、成果を上げる具体的な施策につなげていこう
こんにちは。 だんだんと涼しい日が増えてきてハッピーなsitoです。 さて、今回は、前回に引き続き、コーダーさんをイラッとさせない、美しいデザインデータ作成のすすめ第2弾として、画像・テキストまわりについて書いていきたいと思います。 ※PhotoshopCCでのデザイン作成を例にしています。 と、その前に前回の「レイヤー編」の補足 前回の記事で、Photoshopでレイヤーのロックをまとめて外す方法を書きましたが、投稿した後にもっと簡単な方法を見つけました。 「option + command + /」で、ロック、全部外れるんですね。 知らなかったー/(^o^)\ まだまだ知らないショートカットキーが色々ありそうだなー・・・。 ▼前回の記事はこちら コーダーをイラッとさせない、美しいデザインデータ作成のすすめ〜その1:レイヤー編〜 さて気を取り直して、 こんなデザインデータは嫌だ!〜画像・
こんにちは。 心が乱れると、デザインデータのレイヤーまで乱れてしまう、デザイナーのsitoです。 ・・・よくないですね!非常によくない! そんなことでは、デザインデータを受け取ったコーダーさんを、イラッとさせてしまいます。 と、いうわけで、 自分への戒めも込めて、コーダーさんとイラッとさせない、美しいデザインデータ作成のポイントをまとめてみました。 実際にコーダーさんにも聞いてみたところ、たくさん意見をもらえたので、今回はレイヤー構成のポイントを中心に書いていこうと思います。 ※PhotoshopCCでのデザイン作成を例にしています。 こんなデザインデータは嫌だ!〜レイヤー編〜 レイヤーが全く整理(グループ化等)されていない 私も心が乱れるとやってしまいがちなこれ。 しかし、このままデータを渡してしまっては、コーダーさんが「このレイヤーどこにあるんじゃいッ!」ってなってしまいます。 また、
こんにちは。 だんだん過ごしやすい気温になってきてハッピーなsitoです。 さて、前回、前々回に引き続き、コーダーさんをイラッとさせない、美しいデザインデータ作成のすすめ第3弾として、スマホのデザイン作成について書いていきたいと思います。 ▼前回、前々回の記事はこちら コーダーをイラッとさせない、美しいデザインデータ作成のすすめ〜その1:レイヤー編〜 コーダーをイラッとさせない、美しいデザインデータ作成のすすめ〜その2:画像・テキスト編〜 ※PhotoshopCCでのデザイン作成を例にしています。 こんなデザインデータは嫌だ!〜スマホ編〜 デザインの解像度が低い スマホサイトをデザインする際は、Retinaディスプレイ対応のために、2倍サイズのデザインを作成する場合がほとんどだと思いますが、物理的な画面サイズ(320pxとか375pxとか)で作成されたデザインもたまに見かけます。 画像を使
2017年のウェブデザイントレンドをうまく反映したかっこいいウェブサイトや、アニメーションなど素敵なエフェクトを採用したランディングページなど、HTML5/CSS3で制作された無料テンプレート素材をまとめてご紹介します。 デザインの現場でも人気の高いBootstrapフレームワークをベースとしたテンプレートも多く、自由にそして手軽にHTMLテンプレートのカスタマイズを行うことができる素材が揃います。どれもスクリーン画面サイズに関係なく表示できるレスポンシブデザインを採用しており、さくっとウェブページを作成したいときの参考にもどうぞ。 Bootstrap 対応!2017年最新の無料HTMLテンプレート上半期まとめ レスポンシブ対応で無料!ウェブ制作を高速化できるHTMLテンプレート24選 2017年1月度 あまり知られていないBootstrapスタイルテクニック、小技16個まとめ Wired
「日本は機械学習パラダイスだ」。こう提言したのは、早稲田大学法学部教授の上野達弘さんだ。 なぜなのか。その理由は、日本の著作権法にある。 日本の著作権法では、「情報解析を行うために著作物を複製すること」が、営利・非営利問わず認められているのだ。世界にもまれな規定だという。 著作権・AIに詳しい弁護士・柿沼太一さんが10月2日に都内で開いた「AIビジネス法務・知財セミナー」の内容から、機械学習と日本の著作権法の関係についてまとめる。 キモは「著作権法47条の7」 機械学習とは、大量のデータをプログラムに解析・学習させることで、プログラムが自らデータの特徴を見つけ出し、分類・整理できるようにする手法。例えば、大量の猫の写真を学習させ、猫の特徴を学んだモデルに、新たな動物の写真を入力すると、猫か猫ではないかを判別する――といったイメージだ。 機械学習を行うためには、大量のデータをAIプログラムに
Netflix、アメリカで10月から値上げになって、近々日本でも値上げになる可能性が高いらしいですね。 Netflixが日本で提供を開始したのは2015年。この年は、Apple Music やAmazonプライムビデオ、AWA や LINE MUSIC が提供を開始し、サブスク元年と呼ばれました。 「所有」から「利用」へ、「商品」から「サービス」へ、「販売」から「月額課金」へ。このビジネスモデルは “サブスクリプション”( “サブスク” )と呼ばれ、最近では、ファッションのレンタルサービス、“メチャカリ” が欅坂46をCMに起用して(※2)大々的に展開しています。そのキャッチコピーは・・・ しかし、Twitterではこんな反応も多いです。 サブスクリプションという言葉が、どこまで市民権を得ているかわかりませんが、アメリカでは、カミソリの「Dollar Shave Club」や歯ブラシの「G
GitHub - joseluisballesterosdelval/jquery-fulltable: Plugin that enables any table to be filtered, ordered, edited, and more, all in one. テーブルにフィルタ・並び替え・編集等の機能を加える「jquery-fulltable」 プラグインで初期化すると次のようなテーブルに変化します。 関連エントリ テーブルをサクッとレスポンシブ対応にする「resTables」 テーブル行の詳細をクリックで開けるテーブル実装 テーブルをブラウザ上で組み立てられるUI実装「a-table」
私は以前にグッドパッチというデザイン会社でシニアグロースデザイナーという肩書で働いており、そこで「グロース勉強会」なるものを主催しておりました。 隔週で有志が集まって、そこで私の持っているグロースまわりの知識や経験を一時間ほど共有するだけという会。 ざっくり言うと私が好き勝手に一時間話すだけという会。 はじめはなんとなくで始めたものですが結局は2年弱という長い期間、この会は継続しておりました。 その中で様々な話題に触れたのですが、参加者が一番勉強になったと口をそろえて言うことが「KPIツリー」についての話でした。 この記事ではその「KPIツリー」について私の考えをあらためてまとめておきたいと思います。 KPIとは 念のために。 kotobank.jp 重要業績評価指標。企業などの組織において、個人や部門の業績評価を定量的に評価するための指標。達成すべき目標に対し、どれだけの進捗がみられたか
パンくずでよく見かける三角形の実装方法に注目です。 今までの三角形の作り方は、要素のwidthとheightを0にし、太いborderの一辺を利用していました。しかし、この実装だとリンクは三角形ではなく、矩形になってしまいます。 リンク可能なエリアが、三角形の見た目と同じにする実装方法を紹介します。 Breadcrumb with arrow shaped links 三角形をborderで実装 三角形をtransformで生成 三角形をclip-pathで生成 三角形をborderで実装 まずは、今までの古典的な実装方法です。 リスト要素で実装した各アイテムをFlexboxで横並びに配置し、矢印の三角形をborderで実装します。 三角形をborderで実装 この実装方法は簡単ですが、リンク可能なエリアが矩形になります。そのため、2番目のおしりの三角形は1番目のリンク可能なエリアになって
[レベル: 中級] ページの読み込み速度に関係するデータを計測するツールを Google は新たに2つ公開しました。 1つは Speed Scorecard(スピード スコアカード)、もう1つは Impact Calculator(インパクト カリキュレータ)です。 どちらも同じページで利用できます。 Speed Scorecard Speed Scorecard は他のサイトとのスピードを比較できるツールです(1つのサイトの計測ももちろん可能)。 日本を含む12か国でのスピードと、3G/4G を選択して計測できます。 Amazon と楽天市場、メルカリのスピードを比べてみました。 右上にあるオプションで国と 3G/4G を選択できます。 スピードはリアルタイムの計測ではありません。 Chrome User Experience Report のデータに基づいています。 実際の Chrom
文字を入力して、ほんの数クリックで魅力的な加工ができる、Photoshopテキストエフェクト素材をまとめています。 ここで紹介する素材は、どれも無料ダウンロードできるのが大前提。 フォトショップさえあれば、だれでも簡単に、かっこいい文字をデザインできます。 英語フォントだけでなく、日本語フォントでも利用可能です。 ワンランク上の文字加工には、プレミアムPSD素材の利用も検討してみましょう。 素材の豊富さはもちろん、プロ級の仕上がりをほんの数クリックで実現できます。 文字テキストの編集、PSDファイルの使い方は? 今回ご紹介するフリー素材の多くは、「スマートオブジェクト」機能を利用してカスタマイズします。 Adobe公式Photoshopヘルプページでは、スマートオブジェクトについて以下のように説明されています。 スマートオブジェクトは、Photoshop や Illustrator ファイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く