サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Wikipedia
www.seleqt.net
Web上では、JavaScriptベースの無料スライダープラグインたくさん見つけることができます。いずれもうまく動作し、すべての最新のブラウザをサポートしていますが、今日ではこれらの機能のほとんどを、CSSだけで複製することができます。 どのカルーセルも独自のスタイルを持っているため、作成するために決定版の「最良の方法」といえるものはありませんが、本記事ではCodePenから、カルーセルを自分で作る際のテンプレートとして使用できるオープンソースのスニペットを10個集めました。 いずれのデザインもスタイルと動作の範囲が異なりますが、すべてCSSコードだけで実行されます。 なお記事は前後篇に分かれています。 1.Netflix Show Carousel このNetflixカルーセルは、各ビデオのホバー・トゥ・ズームのアニメーション効果(ホバーすると対象のサムネイルがズームアップされる)で非常
CSSコンテントカードは、ブログ記事や商品・サービス等のコンテンツをまとめるのに最適です。きれいにデザインすることで、各コンテンツをより一層見やすくすることができますし、マウスオーバーエフェクトや画像フィルターを使用すると、さらに高レベルなものになります。 そこで今回は、見た目も美しく機能的な10個のCSSコンテンツカードをご紹介します。自分用のプロジェクトにも使えるコードが入手可能です。 なお、カードデザインはサイトに統一感とクリーンな印象を演出する上で効果的なデザインですが、使用にはもちろん注意点もあります。以下の記事に使用のコツをまとめていますので参考にしてください。 ・【Webデザインのコツ】カードを使ってスタイリッシュで見やすいサイトデザイニングを ・UI/UXデザイナーは注意が必要!カードデザインで頻発している5つのミス 1.Google マテリアルデザインポリシーに準拠したコ
UX Planet UX Planet is a one-stop resource for everything related to user experience. こんな状況を想像してみてください。ある国際会議で、グローバルなウェブサイトの再立ち上げに向けて新しいUXアプローチを提示しているとします。 そこで、ある質問が投げかけられました。 “スクロールの問題についてはどう対応していきますか?” その場にいた全員がこの質問に驚きました。 「スクロールの問題」とは何のことでしょう? 議論の末、質問者が言及していた「スクロールの問題」とは、現状のスマホサイトで必要とされるスクロールの長さであることが判明しました。スマホだとデスクトップより多くのスクロールが必要となるということは、修正が必要な欠陥だと考えられていたようです。 スマホサイトでPC版と同じだけ移動するには、より多くスクロール
UX movement UX Movement is a user experience blog that publishes articles showing how good and bad design practices affect user behavior. デザインにおいて、一番濃い黒を使用すると可読性が落ちているということを知っていましたか? 「米国の成人の58%」がコンピュータで作業することで目に疲れを感じるという調査結果が出ています。デザイナーは、使用する色に注意を払うことによってユーザーの目が疲れてしまう可能性を減らすことができるのです。 ○濃い黒のテキストと背景 濃い黒のテキストや背景は、ユーザーが長時間テキストを読んでいると目に不快感を与え、疲れを引き起こします。 白は100%の色の明るさを有し、黒は0%の色の明るさを有します。色の明るさにによって生じるコント
UX Planet UX Planet is a one-stop resource for everything related to user experience. 最近、カードをデザインする仕事を受けてとても楽しかったので、その時の体験や気付いたことなどを書きます。 まずは概略を。 系統が似ている商品を1つのシリーズに編成します。だいたい1つのシリーズにつき60-120商品が含まれています。ユーザーは商品を検索してから購入するのですが、それぞれの商品には「締め切り時間」、つまりユーザーが購入できる期間が設定されています。 ○Less is more 追加するのではなく、どんどん洗練させましょう。 Before(左)After(右) カードは、商品詳細ページへの入り口として機能します。元のデザイン(左側)には、アイテム詳細ページに入る3つの方法が設定されていました。1)「このアイテム
WordPressで何かのアクションをするための方法を10人の開発者に尋ねたら10通りの回答が得られるでしょう。CMSは多種多様ですし、与えられたタスクには複数の解決策があるからです。 WordPressページ内にHTML5ビデオを搭載しなければならなくなったとします。動画の配置場所は静的ページで、頻繁に置き換える必要があるとします。そういった場合にはvideoショートコードを使用しても問題ありませんが、更新作業のことを考えるとよりシンプルなものにしたいです(ショートコードとは何なのか、そしてそれはどうやって使うのかといったことで更新担当者が悩まなくてもいいように)。 一番シンプルだと思われる解決策の一つは、関連する動画ファイルをアップロードできるカスタムフィールドを作成することでしょう。そこからテーマのテンプレートが動画を表示するのに必要なコードを自動的に作成します。 本記事では、Wor
最初のワイヤーフレーミング※さえしっかりしていれば、レスポンシブレイアウトをデザインすることは難しくありませんが、それでもナビゲーションは難所のひとつです。 流れを理解するのに時間がかかることがありますが、役に立つチュートリアルもたくさんあります。 筆者自身は、ここに一覧したようなコードスニペットを使用しています。これらのレスポンシブ・ナビゲーションのスニペットはすべて、自由に編集して使用できます。様々なスタイルのものがそろっていますので、どんなタイプのサイトでも合うものがきっとあると思います。 ※ワイヤーフレーミングについてはぜひ以下の記事を参照してください。 1.レスポンシブのフルページデモ このフルページのデモについてはたくさん注記すべきことがあります。これは、ウェブサイトのプロトタイピングフェーズをどのくらいまで行うことができるかの例証になります。 リンク上にカーソルを置いて自
HOME デザイン 【UXデベロッパーとは何者か】 今ハイブリッドデザイナーが「需要あり」の理由!デザイナーがそれを目指す利点とは? 現在、デザイン・シンキングの価値はますます多くの企業に認識されつつあり、デザイン業界内の雇用は急速に拡大し続けています。過去5年間だけでも、テクノロジー最大手の複数の企業が、デザイナー数を増やすべくリクルート活動の規模を拡大しています。 たとえばIBMは、デザイナーのデベロッパーに対する採用率の目標を1:72から1:8に引き上げました。そういうわけで、デザイナーは今かくも貴重な財産となっているわけですが、リクルーターはいったいデザイナーに何を求めているのでしょうか。 実は、デザイナーであれば何でもよいというわけでもないのです。エンジニアリング、デザイン、開発の仕事がますます絡み合ってきている現状において採用担当者が求めているデザイナー、それは、「ハイブリッド
サイトのユーザーフレンドリー性を確保するため、Googleはマテリアルデザインガイドラインを利用することをすすめています。その目標は、より直感的なWebを作成するために、いくつかの古典的なデザインの原則に現在のテクノロジーを融合させることです。 この広く採用されているコンセプトは、世界で最も人気のあるコンテンツ管理システム(CMS)であるWordPressでも活路を得ています。マテリアルデザインを利用したWordPressテーマは数多くありますが、それらの多くは無料で入手できます。本記事では、マテリアルデザインを自分のウェブサイトに統合するためにダウンロードできるWordPressの無料テーマから10選して紹介します。 1.Materialize マテリアライズは、マテリアルデザインの原則を利用した、「ミニマルさ」と「クリーンさ」を追求したテーマです。素敵なタイポグラフィーとレスポンシブな
CSSコンテナを構築する際、どうも陳腐に感じることがありませんか。丸、やや丸、正方形または長方形……。もちろんそれでも十分に機能は果たしますが、特にユニークでエキサイティングというわけではありません。 本記事では、CSSとJavaScriptで、円と四角のどちらでもないような、目を引くコンテナを設計できることをご紹介します。実際、CodePenを見て回れば、このテーマで多くのインスピレーションが得られます。 以下では、10の非標準的なコンテナのデザインを紹介します。 1.切り込みを付けられたボックス 些細だけど標準的なボックスにフレッシュな感じを与える、切り込み入りボックスです。単にこのように鋭いエッジを切り取るだけで、よりニュアンスのある見た目になります。このタイプのエフェクトは、ユーザビリティを維持しながら、芸術的なタッチを提供します。 2.角度付きフルワイド・イメージ ビューポートの
Web開発のためのツールがいかに便利であるか、それは誰でも当たり前に知っていることです。 もちろん、すべてが高い価値を持っているわけではなく、一部のものは役に立たないこともあります。ここでは、開発プロセスを効率化するツールをご紹介していきます。 こちらは後編です。(前編はこちらからご覧ください。) ウェブサイトビルダー ここでは2つのスリリングなウェブサイトビルダーをおすすめします。CarrdとLaunchacoです。 Carrdは、シンプルで美しい1ページのウェブサイトをプロトタイピングするためのものです。Launchacoは、スタートアップのためのウェブサイトを構築するためのものです。 そして、もう1つの提案、Startup Frameworkは、Web開発者向けに作成された驚くべきデザインツールです。オンラインアプリを使用して、インポートウェブサイトを構築します。Startup2の無
Web開発のためのツールがいかに便利であるか、それは誰でも当たり前に知っていることです。 もちろん、すべてが高い価値を持っているわけではなく、一部のものは役に立たないこともあります。ここでは、開発プロセスを効率化するツールをご紹介していきます。 まずは前編です。 最初にご紹介する3つは、数多くのジェネレーターをカバーするWeb Code Tool、画像エフェクトのコレクションであるInstagram.css、すぐに使えるコードスニペットが満載のBoilerformです。 Web Code Tool Instagram.css Boilerform トレンドを考慮し、2018年に役立つツールをまとめました。主流のコンセプトに従い、関連する機能を採用していきましょう。 最初に考慮すべきことはアニメーションです。それは、現代のUIの不可欠な詳細です。これを行うには2つの一般的な方法があります:
人工知能は、もはやSF映画やテレビ番組の領域にはありません。日常のニュースの見出しでも見られるようになりました。 人工知能はすでにWeb開発の世界にも浸透しています。実際、人工知能を使用している多くのWordPressプラグインがあります。 AI(人工知能)とは AIは人間の知性を必要とするタスクをマシンが実行できるようにするテクノロジーです。実生活には、自転車、スマート家電、音楽や映画のおすすめサービスなど、多くのAIがあります。 多くのAIはディープラーニングと自然言語処理に大いに依存しています。これらの技術を使用して、大量のデータを処理し、その中のパターンを認識することによって、特定のタスクを達成するようにマシンを訓練することができます。このAIのサブセットは機械学習と呼ばれます。そこでは、マシンに供給されるデータが多くなればなるほど、それらは学習され、向上します。 そして、そういっ
Chromeには、ちょっとした手間を省くのに役立つ無料のツールが満載の拡張機能ストアがあります。 ここに、おすすめの拡張機能をご紹介します。 Web Developer 場合によっては、作業中にJavascriptを無効にしたり、画像を非表示にしたり、ソースコードをすばやく表示したりする必要があります。これらの例は、Web Developerができることのほんの始まりに過ぎません。これはデベロッパーのためのオールインワンのパッケージです。 CSS Peeper デザイナーのためのプログラムパッケージであるCSS Peeperは、ウェブサイトにネストされたCSSコードを抽出することができます。コードのページを掘り下げる代わりに、この拡張機能を使用してオブジェクトのプロパティを表示したり、隠れたアセットをエクスポートしたりすることができます。 エクストラクタの代わりにCSSエディタが必要ですか
あなたは、開発中のWebサイトのユーザーインターフェイス(UI)が正常に動作し、サイト全体が最適なユーザーエクスペリエンス(UX)を提供できているかどうかをどのように調べているのでしょうか。ヘッドレスブラウザは、高レベルの動作を自動化するための、そしてサイトが一般的なシナリオ中で行う動作の質を把握するための高速で軽量のツールを与えてくれます。 ヘッドレス環境には、ChromeやFirefoxなどの一般的なブラウザのヘッドレス版や、いくつかの異なるブラウザをシミュレートするツールを含む、多くの選択肢があります。ヘッドレステストのメリットを熟知し、Web開発やテストに最適なブラウザを選択できるように、利用出来るブラウザの選択肢について学んでいきましょう。 ヘッドレスブラウザとはどのようなものか ヘッドレスブラウジングというのは、奇妙な専門用語のように感じられるかもしれませんが、これは単に、認識
「グラデーションは注目を集める、明るい色の一撃です。」 このステートメントは1995年にウェブデザイナーがウェブサイトにユニークな要素を追加してカラースキームを拡張するために使用したときにも当てはまりました。 今日、グラデーションは、大胆なステートメントを作成し、ユーザーの感情をウェブへ橋渡しし、製品やアイデアにつながるのを助けます。この記事では、グラデーションの魅力とそのデザインの方法についてご紹介します。 それはどういったものだったのか 私たちは2014年にフラットデザインに戻る必要があります。Googleは「マテリアルデザイン」を導入し、Windowsには「メトロ」がありました。当時流行していたスキューモーフィズムデザインに比べて、それらはすっきりと爽やかでした。低解像度モバイルデバイスにはそれらは素晴らしいものでしたが、色の多様性と解像度の高いモバイルデバイスの出現により、トレンド
2014年にGoogleによって作成され、リリースされたMaterial Designは、すべてのデバイス、すべての製品のユーザーエクスペリエンスを統一するために作成された革新的なビジュアル言語であり、強力なテクノロジーと組み合わされた素晴らしいデザインの原則に基づいて構築されています。 マテリアルデザインのシンプルな美学は、Googleのモバイルアプリ(Gmail、受信トレイ、カレンダー、YouTubeなど)とデスクトップサイト全体で見ることができます。 AppleのiOSとMicrosoftのMetroが数年前にフラットOSデザインでWebとモバイルデザインの相貌を変えたように、マテリアルデザインは現在のWebとモバイルデザインのトレンドに大きな影響を与えています。 本記事では、マテリアルデザインのビジュアル言語を自家薬籠中のものとしているデザイナーによって作成された、無料のUIテンプ
デザインに関する様々な質問を投げかけ、海外の経験豊富なデザイナーから学びましょう。 今回は彼らのお気に入りのデザインツールに関して質問を投げかけました。 「より良くデザインするために、また、より生産的になるために、どんなツールを使用していますか?」 1.Simon Pan – 米国サンフランシスコ、Googleのシニアインタラクションデザイナー 国籍:オーストラリア 私は長年のiA Writerのファンで、それが私のデザインをより良くし、より生産的なものにするのに役立つ唯一のツールだと考えています。それは気を散らすことのないライティングツールなので、ピクセルを押すことに時間を費やして時間を無駄にすることなく、デザインに関するより難しい質問に集中することができます。 ライティングにおいてスキルを上げれば、説明することや構造化すること、まとめることや、ストーリーを作り上げることも得意になると思
実際のオブジェクトの特性を模倣するデジタルユーザーインターフェースデザインの1つであったスキューモーフィズムはスティーブジョブズのデザイン言語であり、iOS 7の導入以来、ほとんどの画面から追放されていました。 ソフトウェアの難易度を下げるため始まったデザイントレンドは、ほぼ20年間続いていました。しかし、2012年のiPad上のiBooksアプリのスクリーンショットで以下に例示されているような不快なレベルにまでエスカレートした後、スキューモーフィズムは死を迎えました。 5年以上経ってから、ミニマリズムがほぼ普及していています。しかし、スキューモーフィズムは戻ってきつつあります。 スキューモーフィズムのイメージは決してよくないかもしれません。しかし、概念としてスキューモーフィズムのは戻ってきています。以前よりも極端でない形で反復されているのです。 なぜ消えていったのか? 実世界のオブジェク
素晴らしいデザインの原則をテクノロジーやサイエンスの革新と組み合わせること。 それがGoogleのしようとしていることであり、マテリアル・デザインというコンセプトもその一つです。 マテリアルデザインとは、クラシックデザインの原理やルールと、サイエンスやテクノロジーが明らかにする規範を結びつけるビジュアルデザインコンセプトと言えます。 今ではマテリアルデザインは非常に人気があり、関連するツールやリソースも常に人気があります。 本記事では、マテリアルデザインスタイルのモバイルWeb広告のようなプロジェクトに最適なWebフレームワークをまとめました。 1.プロペラー Propellerは、Googleのマテリアルデザイン基準およびブートストラップに基づいたフロントエンドのレスポンシブフレームワークです。 2.マテリアライズ マテリアライズは、ユーザーエクスペリエンスに重点を置いたレスポンシブ
WebサイトにCSSの簡単な棒グラフを作る方法をご存じですか? 本記事に集めた棒チャートはすべてフリーのオープンソースで、CSS3を使ってデザインされています。 また、これらのグラフのほとんどは、追加のCSSアニメーションやグラディエント効果を加えることでさらに強いインパクトを与えられるものです。使うときにはぜひ自身で工夫してみてください。 (イメージをクリックするとCodePenが見られます。) 1.データ・チャート このコード・セットでは、美しいデザインに上手く作られたチャートが表現されています。 開発者はこのセットにおいて、おもにUXに重点をおいており、それぞれの棒の上端で数値を表しています。 垂直ないし水平バーのテンプレートを、段々に重ねられたバーでフィーチャーしており、とても印象的ですが、まるまるCSS3でまかなわれています。それぞれの色は、表現するものの性質に応じて変えることも
人々は「色」にさまざまな「意味」を読み込みます。 例えば現代日本の私たちにとって喪服は「黒」ですが、同じ日本でも喪服が「白」だった時代もあるそうです(時代劇でよく目にする「切腹シーン」も白色ですね)。 つまり「色と意味」のつながりは、その国や文化に左右されるものであり絶対的なルールがあるわけではありません。 一方、デザインにおいても「色」は非常に大事な要素です。そしてこの「色と意味」のルールが絶対でないのなら、自身が手がけたデザインが全然違う意味で受け取られることもあるかもしれません。 世界で「色の意味」はどれくらい変わるのか?を見ると、私たちの感覚が「絶対」ではないことを気付かせてくれそうです。 ■「赤」の文化的意味 オーストラリア先住民:大地、地球 ケルト民族:死、来世 中国:幸運、祝賀、召集 チェロキー族:成功、勝利、東を表すもの ヘブライ人:犠牲、罪 インド:純潔 南アフリカ:喪
視覚的構成における成功は、人々がそれをどのように認識するかに非常に関連しています。 多くの要因が人間の知覚に影響を与え、重要なのは心理学となってきます。 今日の記事で取り上げるトピックは、形の心理学と呼ばれています。 これがどのように研究され、創造的なプロセスでデザイナーを助けることができるかを見てみましょう。 カタチの心理学とその影響 すべてのビジュアルオブジェクトは、形状において分析することができます。例えば、平均的な家は、三角形が上にある矩形として認識され、太陽は、周囲に線がある円のように表示されることがあります。人々はいつもどんな形や形がそれらを囲んでいるかに気づくとは限りませんが、それでも意識や行動に大きな影響を与えます。人への形の影響を研究する科学は、形の心理学として知られています。 この研究では、それぞれの形には独自の意味があり、心や反応に形ごとに異なった影響を与えると主張し
Webサイトのデベロッパーなら、常に新しいテクニックに興味をもたれていることと思います。CSS3は最新のブラウザにサポートされた新しいプロパテイを持つフロントエンドのデベロッパーにとって大きなターニングポイントとなりました。Webの標準がどんどん進化する中、熱心なデベロッパーはこれまでは考えられなかったようなアイデアを創り出しています。 本記事では、前半と後半に分けて、最新鋭のCSSテクニックを探している方々に無料で使えるコードスニペットをご紹介します。いずれもCSSを使ったWebデザインの従来の限界に挑戦するようなものです。コピーしてサイトに組み込んだり、新しいアイデアのヒントにしたりしてください。 ↓後半はこちら https://seleqt.net/design/snippets-css-2/ 1. チェックボックスのデザイン https://codepen.io/bbodine1/
グラデーションの中にも、とても自然で美しいものと、そうでないものがあることにお気付きでしょうか?この違いは、大自然に見られるグラデーションに似ているかどうかで決まります。私たちが美しいと感じるグラデーションは、自然の中に見られるものと近いのです。逆に、私たちが見たことのない色の組み合わせで作ったグラデーションは、落ち着きません。 人間の目は、色の組み合わせが本物か偽物か、簡単に見分けてしまいます。コンクリートに囲まれた場所を抜け出して自然に出てみると、山や島、森林には、とても美しいグラデーションが広がっています。これが、脳が最も美しいと感じる色の組み合わせなのです。 デザインではよく、調和しない組み合わせが見られます。その好例が赤から緑へのグラデーションです。どちらもとても明るい色であり、自然では見られない組み合わせです。またオレンジから青への遷移も不自然です。実際には、間の紫がないとこの
UIデザインにおいて、色の選択はなかなか時間のかかるタスクです。適切なカラーパレットを構築するため、デザイナーは多くの時間と労力を費やします。 今回はそんなデザイナーの手助けとなる、UIの色選択に役立つ知識を6つご紹介します。 1.60-30-10ルールを使う これはインテリアデザインに由来するルールです。構図のバランスを取る際には、色を60%-30%-10%の割合で使いましょう。60%をメインカラーに、30%をサブカラーに、10%をアクセントカラーに割り当ててください。 2.コントラストを活用する コントラストも、構図作りには重要です。UI要素一つひとつを分離し、認識しやすくする効果があります。目的に応じてコントラストのレベルを調整しましょう。たとえば、特定の要素に強く注目してほしい場合、青と赤のように大きく異なる色を使いましょう。CTAボタンなどによく活用されます。 3.心理学を考慮す
ウェブ開発者の間で人気のAdvanced Custom Fields(ACF)は、Wordpressにデフォルトで存在するカスタムフィールドを使って、よりパワフルで使いやすいカスタムフィールドを作成することができます。 ACFを使うことでコンテンツの編集がより効率的になり、技術に自信のないユーザーにも大きな助けになります。 例えばスタッフのプロフィールページを作ったとすると、それぞれのスタッフの名前、役職、メールアドレス、写真、自己紹介といったカスタムフィールドを作成できます。 個人のテーマのテンプレートに追加することで思うようにコントロールができ、コンテンツの編集が簡単になるだけでなく、データを正しく一貫して表示することができる優れものです。 ACFに、より便利な機能を追加できる関連プラグインも開発されているので、今日はそのいくつかをご紹介します。 ACF Theme Code カスタム
スプリットスクリーンはユーザーが二つのオプションから一つを選ぶ際に使うものだと思いがちですが、最近ではこれを使ったユーザーインターフェース(UI)がコンテンツを見せる手法として人気です。ページのレイアウトとして効果的に使ったり、更には移動するアニメーション(https://speckyboy.com/css-animation/)を使うなど、クリエイティブな使い方をしているサイトもあります。 この記事ではスプリットスクリーンを使った独創的なインターフェース10選を、必要に応じて編集できるソースコードと共にご紹介します。 (イメージをクリックするとCodePenが見られます。) 1. 二者択一のためのスプリットスクリーン 最もよく使われているスプリットスクリーンで、ウエッブサイトの訪問者に二つのオプションを提示します。背景の色で上手く分割され、中央の丸いロゴが画面全体をまとめています。 2.
登場した当初はUI課題に対するソリューションとしてもてはやされ、デザイナーたちに広く受け入れられてきたモーダルウィンドウ。 UIを簡素化し、スクリーンの使用もセイブできます。 ですが、今ではすっかりユーザに疎まれる存在に…。 この記事では、モーダルウィンドウの正しく効果的な使い方をいまいちど振り返ってみましょう。 モーダルウィンドウを表示するタイミング ユーザの作業を中断させてでも知ってほしい重要なお知らせ、ユーザ情報の入力、情報を補足したいときに使いましょう。 モーダルウィンドウに必要な要素 タスクを妨げにならないように、次の物がきちんとオーバーレイに含まれるようにしましょう。 1.エスケープハッチ ユーザがモダールを閉じられるような逃げ道を残しておきましょう。 キャンセルボタン、クローズボタン、エスケイプキーなど。 2.タイトル ユーザがオリジナルページとの関連で今どこにいるのかを見失
次のページ
このページを最初にブックマークしてみませんか?
『SeleQt【セレキュト】』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く