「スクリーンサイズ（画面解像度）＝ブラウザサイズ」と同一視するのは間違いだということがよくわかる解析レポート｜SeleQt【セレキュト】

2017/06/29 5 users ブラウザサイズ SeleQt レスポンシブデザイン モニター

現在レスポンシブデザインへの対応が重要になる中、ユーザーの平均的な「ブラウザサイズ」を考えることはほとんどなくなりましたが、「画面解像度」を「ブラウザサイズ」と同一視できない面白いデータを取得する方法があります。 2011年にユーザーのスクリーンサイズとブラウザサイズを取得するJavaScriptを書き、データベースの1レコードに保存しました。そこで、モニターと同じくらい大きなブラウザサイズだった... 続きを読む

「サービス」を売るサイトはこうデザインする！オンラインサービスの売上がのびる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 データ ユーザー 選択肢 フォーム ボタン

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

マルチオーサーウェブサイトを改善してくれるWordPressプラグイン10選｜SeleQt【セレキュト】

2017/06/26 7 users SeleQt

ワードプレスは、本来マルチ・オーサーのWeb制作に適したシステムを持っています。 オーサーがどこに散在していようが、ワードプレスでは複数のオーサーが作成したコンテンツを一箇所に集めることができます。 ただ、編集フローの管理、コンテンツの組織化の改善など、いくつかの補足的なフィーチャーで補完することも、場合によっては必要となるでしょう。 本記事では、そんな場合に役立つ10の無料プラグインを集めてみま... 続きを読む

【フラットデザインVSミニマリズム】２大デザイン・トレンドを比較！その「違い」と適切な「使用法」を知っていますか？｜SeleQt【セレキュト】

2017/06/26 9 users iPhone SeleQt 証拠 相容れないもの コンセプト

フラットデザインは、最近でもっとも影響力のあるトレンドになっています。 その証拠に、iPhoneのiOS 7のデザインは、普段デザインに関わらないような人の話題にも上るほどでした。 しかし、多くの人はフラットデザインをミニマリズムデザインとを混同しているようです。 これに関しては問題があって、それは、これら二つのコンセプトが本来別々のものであり、プロジェクトやデザインの仕方によっては相容れないもの... 続きを読む

目から鱗の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」など）。 しかしときに、どう... 続きを読む

CSSボタンのコレクション８選【ユーザに行動を促す！デザインの参考に】｜SeleQt【セレキュト】

2017/06/15 9 users スタイ CSS SeleQt ライブラリ ショッピングカート

ボタンは、オンラインにおいてユーザーの行動を促す大切な要素です。ショッピングカートに商品を追加したり、決定を確認したり、フォームを送信したりする時には、必ずボタンを使用します。そのため、デザイナーはユーザーにとってわかりやすいボタンを作らなければなりません。 今回は美しいボタン作りに役立つ、CSSのボタンコレクションとライブラリを紹介します。 1. bttn.css bttn.cssは明るいスタイ... 続きを読む

デザインでコンバージョン率を高める！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の便利な機能の「落とし穴」とその対策手法【新機能、そのまま使っていいいの？】｜SeleQt【セレキュト】

2017/06/08 6 users SeleQt プロパティ CSS 落とし穴 欲求

CSSの新しいワザを使ってみたくなる欲求は非常に強いため、時には何が起こっているのかよくわからないまま使ってしまうこともあるでしょう。特に商用のプロジェクトで作業している場合には、新しいCSSクラスやプロパティが実際に何をしているのか、どんな制限があるのかしっかり理解しておくことが重要です。 今回はよくあるCSSでのミスや落とし穴について紹介します。 誤用されるプロパティ：font-size-ad... 続きを読む

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のグリッドシステムを簡単に利用... 続きを読む

グラフィックデザインの現在と今後【優れたUXの提供には必須】｜SeleQt【セレキュト】

2017/06/02 9 users SeleQt グラフィ 橋渡し 制約 細部

有名なデザイナーであるチャールズ・イームスは、かつて「細部こそがデザインを作る」と語っています。 グラフィックデザイナーたちはこの言葉に共感し、芸術と、機能的な目的を持つデザインの橋渡しをしています。彼らはいくつもの制約の中で何とか芸術性と機能性を融合させ優れた製品を作ろうと模索しています。彼らの探求するグラフィックデザインとは一体何なのでしょうか？その世界を少し見てみましょう。 そもそもグラフィ... 続きを読む

【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文が必ずしも必須ではない ということが分かりました。 もしあなたが関数型プログラミングに慣れていない場合、“この著者は何を言っているんだ”と思われるかもしれませんが、どうぞ少しだけお付き合いくだ... 続きを読む