「サービス」を売るサイトはこうデザインする！オンラインサービスの売上がのびるWebデザインのヒント6点｜SeleQt【セレキュト】

2017/06/29 19 users プロセス マーケティング デザイナー テクニック 利点

オンラインでサービスを売るということには、なんらかの製品を売るというのとは全く違ったむつかしさがあります。 個々に独立したいくつものプロセスを踏み、いくつものマーケティング・テクニックを駆使しなければならず、あるいはまた、必ず従うべきと考えられるWebデザインの原則もあります。 だからデザイナーは、オンラインで「製品」ではなく「サービス」を売るということに固有の利点と不利点を、いつも理解しておかな... 続きを読む

4つのポイントでデザインを整理！WebサイトのUXを簡単に高める方法｜SeleQt【セレキュト】

2017/06/28 11 users 物置 クローゼット SeleQt ウェブ 文章

クローゼットや物置を整理するように、デザインも時には整理すべきです。余計なものを片付けてしまえば、使い勝手とUXの向上を達成することができます。 今回はデザイン整理における4つのポイントを紹介します。 1.文章 を短くする ユーザーはウェブを「読む」のではなく、情報をスキャンするように「眺めて」います。 しかしその割に、ウェブには余計な言葉があふれています。画面に表示される文字を削減することで、サ... 続きを読む

決済画面のWebデザインにおけるポイント５つ【ショッピングサイトの要だからこそ…】｜SeleQt【セレキュト】

2017/06/27 13 users ユーザー プロセス 構築 意図 手続き

ショッピングサイトには必ず支払いのプロセスが存在します。その最終段階となる決済画面の構築には特に気を遣うはずです。支払いフォームはユーザーが手続きを最後まで進めやすいように作らなければならず、ここで問題が発生すればユーザーは不信感を抱いてしまうでしょう。そうしたことがないように、 これから紹介する4つのポイントを押さえて支払いフォームを使いやすく改善してください。 1.意図をはっきりと 最終的な目... 続きを読む

「ラジオボタン」のデザインにおけるポイント【より良いUXを提供するために…】｜SeleQt【セレキュト】

2017/06/26 59 users データ ユーザー 選択肢 フォーム ボタン

ラジオボタンはフォームにおける必須要素です。互いに相容れない２つ以上のオプションがある時に使用され、ユーザーは正確に１つの選択肢を選ばなければなりません。言い換えれば、選ばれていないラジオボタンをクリックすることによって、選んでいた他のどんなボタンも選ばないということになります。 一般的なラジオボタン・コントロール ラジオボタンは正しく使用されれば素晴らしいものです。 ユーザーが間違ったデータを入... 続きを読む

目から鱗のCall to Action！「良い」CTAとは何かを教えてくれるユニークな例10選｜SeleQt【セレキュト】

2017/06/21 13 users CTA SeleQt 留め金 エレメント Action

良いコール・トゥ・アクション（CTA；ユーザのアクションを喚起するエレメント）は、Webサイト上のさまざまな要素の目的を統合する留め金のようなもので、サイトがユーザに何を求めているかを、ユーザに対して効果的に示すものです（例；「Buy this book」「download our free guide」「contact us for more information」など）。 しかしときに、どう... 続きを読む

デザインでコンバージョン率を高める！CTAボタン・デザインの注意点｜SeleQt【セレキュト】

2017/06/13 21 users SeleQt CTA CTAボタン コンバージョン Gmail

ユーザのコンバージョンの最も直接の媒介になるのは、言うまでもなくCTAのボタンです。 このボタンのデザイン如何によって、コンバージョン率が大きく違ってくることが知られています。 ボタンという要素だけに絞ったとき、効率のよいボタンとはどんなものでしょうか。 本記事では、CTAボタンデザインの基本を紹介します。 ボタンのUXを考える GmailのUXを見てみましょう。 下の方に青い送信ボタンがあるのに... 続きを読む

CSSの裏技20選を一挙紹介！【必見！コツをつかんで効率的にWebサイトをデザインする】｜SeleQt【セレキュト】

2017/06/12 91 users SCSS SeleQt less ローディング レンダリング

フロント・エンドの開発はセレクター選択と最小コードによる迅速なローディングとレンダリングにおいて、ますます効率性に特化しています。 LessやSCSSといったプレ・プロセッサは仕事をする上で役立ちますが、自然なやり方で最小かつ手早くCSSを記述する方法は数多くあります。 このガイドは20ProCSSをカバーしており、レイアウト全体でスタイルの流れを標準化し、効率的なだけでなく多くの共通した問題も解... 続きを読む

CSSで縦方向にセンタリングする方法【基本手法6つを紹介】｜SeleQt【セレキュト】

2017/06/07 16 users コーディング メディアクエリ SeleQt 実装 ディスプレイ

異なるサイズのディスプレイでコンテンツをセンタリングし正しく動作させるのは、デザイナーにとって未だに大きなチャレンジです。 実装の手段も様々に存在し、どれが最も優れているのかがわかりにくくなっています。多くのCSSによる縦方向センタリングは多くのコーディングが必要になったり、メディアクエリを使う必要に迫られたりします。それぞれの手法がどのように目的を達成し、HTMLやブラウザのルールにどのように影... 続きを読む

最新！CSSをもっと効率よく活用できるツールを一挙紹介！【もう試しましたか？】｜SeleQt【セレキュト】

2017/06/06 25 users SeleQt グリッドシステム CSS フレームワーク ツール

CSSが進歩に従って機能を活用するためのライブラリやツールが次々登場しています。こうしたものを利用することで、普段の作業時間を短縮できたり、まだ知らない機能について知ることができます。 今回は 今年リリースされたばかりの、最新CSSライブラリ、フレームワーク、ツール を紹介します。 CSS Flexboxツール＆ライブラリ 1. Waffle Grid Flexboxのグリッドシステムを簡単に利用... 続きを読む

【Microsoftが発表した新デザイン言語】「フルーエントデザイン」とは？これからどうなる？｜SeleQt【セレキュト】

2017/05/30 18 users SeleQt Microsoft 新デザイン言語

2017年のBuildカンファレンスにおいて、マイクロソフトはフルーエントデザインシステムを発表しました。ネオンというコードネームで開発されていたこのデザインは、現行のWindows 10のデザインに半透明とアニメーションを加えるものです。一体どんなものなのか、ご紹介しましょう。 フルーエントは未来のデザインシステムとなるか マイクロソフトは、フルーエントをデザインランゲージではなく、デザインシス... 続きを読む

【保存版】高品質なAfter Effectsテンプレート35選！クリエイティブなヒント満載｜SeleQt【セレキュト】

2017/05/23 69 users SeleQt ヒント満載 保存版

動画クリエイターの代表的なツールと言えば、Adobe After Effects（アフターエフェクト）ですが、動画コミュニケーションの普及によりAfter Effectsを活用するシーンも多くなってきたのではないでしょうか？ そんな中、作業の効率化や生産性UPにとって欠かせないのがAfter Effectsのテンプレート。もちろん高品質なAfter Effectsのテンプレートが制作のスピードアッ... 続きを読む

iPhoneの変化に合わせて生まれたUIトレンド【デザイナーの方々、見逃していませんか？】｜SeleQt【セレキュト】

2017/05/16 51 users iPhone SeleQt iOS 1 親指 アップル

最近のモバイルUIにはとあるトレンドが見られます。重要な要素が画面の下側に配置されるようになってきているのです。iOS 10で変更されたアップルの地図アプリを見れば一目瞭然です。 この変更には明確な理由があります。それはスマートフォンがどんどん大きくなる一方で、私たちの手の大きさが変わらないためです。 初期のiPhoneでは親指で画面左上の戻るボタンをタップすることができました。しかしPlusモデ... 続きを読む

タッチ操作デバイスのデザインはこれで！フリー「ジェスチャー・アイコン」15選！｜SeleQt【セレキュト】

2017/05/11 14 users ライセンス タッチ 普及 アイコン 要素

携帯電話やタブレットからラップトップまで、タッチ・デバイスの急速的な普及によって、タッチ操作可能な要素をわかりやすく伝えることが必要になっています。 そんなとき使い勝手がよいのが、「ジェスチャー・アイコン」です。 アイコンを使えば、アプリの使い方を手っ取り早く知らせることができるからです。 本記事では、15のフリー・ジェスチャー・アイコンを集めました。 使用の際には、ライセンス・チェックを忘れない... 続きを読む

【優れた作品から学ぶWebデザイン】インスピレーションをくれるユニークなアニメーション使用例8選｜SeleQt【セレキュト】

2017/04/27 15 users SeleQt インスピレーション 一片 アニ webデザイン

Webデザインのような仕事において、インスピレーションが重要なのは言うまでもありません。 フリーランサーであれどこかのチームに属しているのであれ、朝、仕事前のちょっとした時間に一片のインスパイアリングな作品に触れることができるなら、それは一日の仕事のはじまりとして申し分ないと言えるのではないでしょうか。 本記事では、シンプルロゴからより複雑でインテラクティブなストーリー性をもつものまで、様々なアニ... 続きを読む

【モバイル×アニメーション】デザイナー要確認！モバイルアプリにおけるアニメーション使用の基本的考え方！！｜SeleQt【セレキュト】

2017/04/12 13 users iPhone SeleQt エレメント エクスペリエンス

iPhoneやモバイルアプリの登場以来、「アニメーション」はすっかりインターフェイス・デザインの重要な構成要素になりました。 それは、アニメーションが、作品に「時間」というエレメントを付加することによって、人間の現実的な感覚とソフトウェアとの間にどうしても存在する大きな「ギャップ」に、「橋」をかけてくれるからです。 ユーザを喜ばせるようなエクスペリエンスのためにモーションが欠かせないのも、ここに理... 続きを読む

【デザイナーのためのマーケティング技術】効果的な広告キャンペーンを打つテクニック5選｜SeleQt【セレキュト】

2017/04/04 28 users ユーザ ソーシャルメディア アクション パンフレット コツ

最近のデザイナーはWebサイトの制作からパンフレットの作成、ソーシャルメディアまで仕事の幅がどんどん広がっています。そんな中でも、広告の仕事は慣れていないと難しく感じてしまうのではないでしょうか。 本記事では、広告キャンペーンをデザインするコツを5つにまとめてみたので、ぜひ参考にしてみてください。 １．ヘッドラインで仕留める 短くシンプルで、アクションにつながるようなヘッドラインでユーザを引き込み... 続きを読む

【使い方を究める】Webデザインにおけるアニメーション使用の基本的な考え方｜SeleQt【セレキュト】

2017/04/04 38 users ユーザ ご存知 アニメーション アクション 部品

機能的かつ楽しいアニメーションは、現在のWebデザインにおいて欠かすことのできな部品となっています。 ご存知の通り、アニメーションを使えば、ユーザを誘導したり、ユーザが自分のアクションの結果を目で見ることができるようにすることができ、またそのようにしてユーザの振る舞いに影響を与えることができるのです。 本記事では、このようにWebエクスペリエンスを向上させてくれるアニメーションの使用についての、基... 続きを読む

【コピペで簡単】画像のホバーエフェクトに使える！CSSスニペットリスト８選｜SeleQt【セレキュト】

2017/02/24 16 users SeleQt ホバーエフェクト コピペ 画像

ウェブのトレンドは変わりやすく、サイトを最新に保つ作業はどれだけやっても終わりがありません。CSSを使えばウェブサイトのカスタマイズがあっという間にでき、新たな機能を追加することも簡単になります。時間が節約できるだけでなく、サイトのパフォーマンスも向上するでしょう。 ただし、CSSは慣れてしまえば快適ではあるのですが、その基本を学習し使い始めるのは大変です。美しいサイトを作るにはどうしても高いコー... 続きを読む

【いつも使っているif文、実はいらない!?】JavaScriptでif文を使わない方法｜SeleQt【セレキュト】

2017/02/21 15 users 必須 SeleQt プログラミング 著者 関数型プログラミング

JavaScriptは、毎日使う必須のアイテムになっているでしょう。 しかし、そこでのプログラミングを再考してみてください。 if文について考え直すと、if文を完全に避けてプログラムを記述することで、 if文が必ずしも必須ではない ということが分かりました。 もしあなたが関数型プログラミングに慣れていない場合、“この著者は何を言っているんだ”と思われるかもしれませんが、どうぞ少しだけお付き合いくだ... 続きを読む

【2017年に使うべき！】あなたの効率を上げる最新Webデザインサービス6選｜SeleQt【セレキュト】

2017/02/20 72 users ウェブデザイナー SeleQt HTML 選択肢 ツール

ウェブデザイナーや開発者の役に立つツールは毎月のようにリリースされていますが、一体どれが優れていてどれがそうでないか見分けられているでしょうか？ あなたのプロジェクトに最適なのはどれでしょう？お金を出す価値のあるものはどれでしょう？ ここでは特におすすめのサービスを6つご紹介します。 1. IMCreator.com 新しいサイトを作成する際には多くの選択肢があります。HTMLでデザインを組むか、... 続きを読む

ダイナミックな動きが手に入る！フルスクリーンスライダーの作り方【HTML・CSS・jQuery使用】｜SeleQt【セレキュト】

2017/02/20 11 users SeleQt 作り方

今回はHTML、CSS3、jQueryを使った全画面のスライダー機能をご紹介します。お店のウェブサイトで商品を表示させたい時に使うことができますよ。 こちらのチュートリアルではGoogle FontのMontserrat、Oswaldを使っています。 HTML まずはHTMLの構成です。 必要なもの ・ナビゲーションメニュー ・クラスネームcss-slider-wrapperを使ったwrapper... 続きを読む

【心理学から学ぶUXデザイン】デザイナー必見の5つのルール｜SeleQt【セレキュト】

2017/02/16 45 users SeleQt UXデザイン デザイナー必見 心理学 ルール

Webデザイナーにとって、経験は重要です。しかし、経験のみに基づいてデザインを考えるのは、リスクがあるかもしれません。 たとえば、Webサイトを大幅に再設計してはならないという原則をご存知でしょうか？ あるいはまた、閲覧者が男性の場合と女性の場合とで、Webデザインはどのように差異化させるべきでしょうか？ Webデザインには、何十年もの研究と心理学実験に基づいた心理学的アプローチがあるのです。 以... 続きを読む

【これでエラーはかなり減る！】For Loop構文を使わないJava Scriptのあり方｜SeleQt【セレキュト】

2017/01/27 15 users SeleQt java script エラー かなり あり方

JavaScriptのfor loop構文は、これまでよく使われてきましたが、今では新しいプログラミング技術の台頭によって引退すべき状態です。 これはあなたにプログラミングのエキスパートになれというものではなく、単なる変更レベルのもので、今携わっているプロジェクトですぐに試せるものです。 JavaScriptのfor loop構文の何が問題なのでしょうか？ for loop構文の設計は、 状態の変... 続きを読む

このフォント見覚えある！2016年のWebサイトを彩った10個のおすすめフォント｜SeleQt【セレキュト】

2016/11/24 22 users SeleQt リニ フォント 下旬 Webサイト

11月も下旬になり、まもなく2016年が終わろうとしていますね。 この1年間も、Web上では素晴らしいフォントで彩られていました。 今回は、その中で見つけたおすすめのフォントトップ10を、簡単な説明と共に紹介したいと思います。 Maison Maison Neue はTimo Gaessner氏によりデザインされ、2012年にリリースされたグロテスク・サンセリフ書体となります。 Maisonをリニ... 続きを読む

ダウンロード時などに表示される「プログレスバー vs. スピナー」。どちらをどう使うのが「正しい」のか？｜SeleQt【セレキュト】

2016/11/22 13 users プログレスバー SeleQt スピナー 本稿 店員

もしお店で商品の場所を誰かに聞いて、店員がそこに立っているだけだったらどう感じるでしょうか？おそらくイライラして立ち去るでしょう。 これと同じようにユーザーはスクリーン上で長時間スピナーを見ているとき、同じ心理状況になっているかもしれませんよ？ そこで本稿では、プログレスバーとスピナーを使うべきシーンを説明します。もしWebサイトやアプリにプログレスバーとスピナーのどちらを設置するべきか悩んだ時、... 続きを読む