意味不明なことばかり言ってるUXデザイナー達の代わりに「UXデザインとは何か」を端的に説明しよう
釣りタイトルですみません。 でもね、世に言う「UXマン」っているじゃないですか。 いかにも自分は上流工程だと言わんばかりに様々なフレームワークや聞こえはいい理論を振りかざしているにも関わらず、自分では手を動かしてモノをつくらないし、いざつくってもらったらアチャーなアウトプットだす人たち。 そもそも「UXデザイン」には色んな解釈があったところに、“つくってなんぼ”のWeb業界にそういう人たちが少なからずいる（し、えてしてなぜかデカイ顔をしている）もんだから、もはやUXデザイナーという職そのものが胡散臭いと思われていることが多いんですよね。 前職の話になりますが、当初「UX推進部」という部署に属していたので、勤務外にもUX系の勉強会にはたくさん参加してみたけれど、ほとんどくっそ当たり前のことしか言ってない講演とか、Sketchはいいぞ〜って永遠に言ってるだけの集まりとか、本当に参加する価値がな
CSSで実装する矢印アイコン付きボタンのアニメーションエフェクト - NxWorld
フラットやゴーストといったようにシンプルで一見ボタンと認識しずらい感じのボタンデザインを使う場合、それが少しでもボタンだと分かるように矢印等のアイコンを付けることが多いと思います。 今回はそんな矢印付きボタンを実装する際、ホバー時に矢印にちょっとしたアニメーションエフェクトを実装したサンプルで、いずれも実装にはCSSのみを使用しています。 サンプルの記述内容について CSSで記述している内容はこのサンプルの見た目に関する記述も多いので、矢印の動きのみ抜き出したい場合はボタンとなる要素にposition: relative;を追記し、::before, ::afterで記述している内容や:hoverで記述している部分を使ってもらえれば同じ動きを再現できるかと思います。 また、紹介しているボタンに付いている矢印アイコンは、いずれもCSSのborderを使って実装をしています。 サイトによっては
スタンダードなチェックマーク ｜ シルエットデザイン
筆書きのチェックマークに続き、スタンダードなチェックマークをリリースします。 このマークは広告系のデザインでよく使われる素材です。何かを選択させたいという時に、使用すると効果的なものですな。 せっかくなので、過去素材に加え色々なパターンを追加してみました。 キーワード:チェック,チェックマーク,跳ね,check mark
IFN 無料アイコン。SVG/EPS/PNGのフリー素材
無料アイコン。SVG/EPS/PNGのフリー素材。商用可、リンク不要、著作権表示不要。EPS、PNGダウンロード
ユーザ・インターフェースのためのイージングカーブをつくる | POSTD
フラットデザインの導入以来、アニメーションの質が、今までにないほど、優れたインターフェース作成のために必要不可欠なものとなっています。モーションデザインを通して、製品の総体的なブランドエクスペリエンスを左右するようになり、製品を、市場の他のものと差別化する要素となりました。アニメーションは複雑なインタラクションを簡素化し、優れたデザインを記憶に残るユーザエクスペリエンスにしました。では、質の高いアニメーションはどのように作られるのでしょうか？ イージングカーブは多くの要となるコンポーネントの1つで、適切なアニメーションをとり、素晴らしいものに作り上げます。 問題なのは、イージングカーブがどのように機能するかについての理解が、少々難しいということです。 前回の記事 After Effects to CSS で触れたタイミング関数への興味の派生としてこの記事を書きましたが、この記事を読むことで
管理画面のHTMLデザインテンプレート 無料＆有料テンプレート14選 | sounansa.net
WEBシステムをつくるときに管理画面のデザインは、予算や時間の都合から工数をかけにくい案件も多いですね。 社内システムであればなおさらです。 使い勝手の要素としてUIは重要な一つであることは、わかってはいるんですが。。。。 カッコいいデザインをサクッと作るためには、Bootstrapはとてもありがたい存在です。 デザイナーが思っているほどBootstrap臭なんて気にしてません、一般人は。というより知らないですBootstrap自体を。 システム屋さんはこういう便利なものはガンガン活用して生産性を上げましょう。 今回、無料と有料のHTMLテンプレートをそれぞれ紹介いたしますが、有料とはいっても日本円で2～3千円程度とリーズナブルです。 有料のものは、ログイン画面や、モーダル、チャート、データグリッドなどが充実しています。 レシポンシブのログイン画面のデザイン一つ作るだけでも1時間ぐらいかか
色んなタイプのメニューを簡単作成[CSS Menu Maker]
ECサイトに限ったことではありませんが、ヘッダー、フッターやサイドナビにはメニューを表示していますよね。 マウスオーバーで色を変えたり、さらに細かい階層のメニューが表示されたり使い勝手の良いメニューを用意しておくことはECサイトでは非常に重要になってきます。 でも、HTMLやCSSの知識がないとかっこよくて、使い勝手の良いメニューは作れないと思います。 そこで本日は、HTML、CSSの知識がなくても簡単にメニュー作成が出来るサービスを紹介します。 CSS Menu Maker 色んなデザインのメニューが用意されており、自分好みのメニューを簡単に作成することが出来るジェネレーターになります。 ドロップダウンメニュー フライアウトメニュー 縦型メニュー 水平メニュー タブメニュー 様々なメニューのレイアウトがあるので、迷ってしまいますが、１つを選択すると ↓↓のような実際に動作を確認できる画面
![色んなタイプのメニューを簡単作成[CSS Menu Maker]](https://cdn-ak-scissors.b.st-hatena.com/image/square/6b819a8f27d8d156bc3c23accead7d24a1ecd3df/height=288;version=1;width=512/https%3A%2F%2Fpeacepopo.net%2Fwp-content%2Fuploads%2F61-1.gif)
レスポンシブデザインにぴったりなカルーセルスライダー「Owl Carousel」 | スターフィールド株式会社
レスポンシブデザインが多くなってきている昨今にぴったりなカルーセルスライダーを紹介させて頂きます。 「Owl Carousel」というプラグインですが、 こちらのプラグインなにがぴったりなのかというと、 レスポンシブ対応なのはもちろんで、 タッチにも対応しており、 なんといっても一番いいのが、 オプションで、PC、ダブレット、スマホに合わせて、 アイテムの表示する数を変更出来るという点です。 他のプラグインでは、それようのオプションはなく、 自分でスクリプト書かなければいけませんでした。 幅の調整もできるので、自由度もあります。 デモがありますので、そちらをご覧下さい。 DEMO 設定の仕方 まずは、head内に以下のファイルを読み込みます。 <link rel="stylesheet" href="css/owl.carousel.css"> <link rel="styl
【jQuery】斬新な動きのスライドショーが魅力の［Fullscreen Slit Slider］の使い方
今日は大胆な動きのスライドショーが魅力のjQueryプラグイン［Fullscreen Slit Slider］を紹介します。 まずは実際に［Fullscreen Slit Slider］を使ったサンプルをご覧ください。 実装サンプル：ONZE Fullscreen Slit Slider こちらのサンプルではカスタム仕様で「フルスクリーン対応、」「2.5秒ごとに自動再生」「キーボードの左右でスライダーを制御可能」にしています。 スライダーが切り替わるタイミングで上下左右に大胆なスリットが入り、ダイナミックな動きで次のコンテンツが表示されていきます。 見ていても気持ちイイ滑らかさですよね。 基本的にはコピペで実装できますが、細かな設定にはjQueryもしくはJavaScriptのプログラミングの知識が必要なので、難易度は中級〜上級者仕様になります。 初心者にはちょっと難しいかもしれません。
【デザインまとめ】綺麗なデザインの管理画面 40種類
今日は管理画面のデザインを、まとめてみました。いつもより多めな40種類です。トレンドを反映してか、フラットデザインが多いですね。 通常の静的なサイトのデザインとは異なり、投稿がある場合無い場合とたくさんのパターンを考えながら制作しなければならないので、デザイン力が問われます。これらを日本語に置き換えるとまた違って見えたりするのですが、ひとまず、ご参考になればと思います。 ▼ The Kamarel デモサイト ▼ Apricot Bootstrap デモサイト ▼ The Vira デモサイト ▼ Cameo デモサイト ▼ DefOne デモサイト ▼ Pixit デモサイト ▼ AdminEx デモサイト ▼ Odin デモサイト ▼ Minimal デモサイト ▼ Delighted Flat デモサイト ▼ Tisa Premium デモサイト ▼ Adminre デモサイト ▼
矢印アイコン | WEBデザイナーが作った超シンプル素材集
前に似たようなのがありましたが、丸に三角の入った矢印アイコンです。 ※こちらはpngファイルです。 >> ZIP一括ダウンロード
色彩理論の基礎に学ぶ、相性抜群な「色の組み合わせ」 | ライフハッカー・ジャパン
身につける服でも仕事のプレゼンテーションでも、何かの見た目を良くしたいのなら、色は大切な要素です。ですが、オレンジと青が完璧な組み合わせだなんて、誰もが直感的に知っているわけではありません。自分の直感を信じられないなら、色彩理論の基本を理解して、それをもとに正しい色を選んでみてはどうでしょうか。 色相環を知る 上の図は基本的な色相環で、色を選ぶ際の指針になるものです。学校で見たことがあるかもしれませんが、忘れている方のために、簡単におさらいしておきましょう。 赤、青、黄色の3色が原色です。赤と黄色を混ぜると橙になります。青と黄色を混ぜると緑になります。赤と青を混ぜると紫になります。そのため、橙、緑、紫は二次色と呼ばれています。赤紫や青紫などの三次色は、原色と二次色を混ぜたものです。 すべての色には明色（明度の高い色）と暗色（明度の低い色）があります。明色は元の色に白を混ぜてできる色、暗色は
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
アクセントに使えるCSSのborderと擬似要素を使った立体的な見出しデザイン / SQUEEZE - Web Design Studio -
HTMLはシンプルにCSSの「border」や「box-shadow」、擬似要素の「:before」や「:after」を使って実装する立体的な見出しデザインをご紹介します。 以下2つの記事にインスパイアされ、見出しデザインをいくつか作成しました。両記事を参考にしつつも、私なりの方法を説明していきたいと思います。 CSSの擬似要素を使った見出しデザイン｜Webpark[CSS]h1一つだけでこんなにかわいいレトロ風リボンが実装できるスタイルシート | コリス まずはサンプルをご覧ください。 サンプルページ » 「border」で三角形や台形を作る最初に、今回の大きなポイントでもある「border」で三角形や台形を作る方法をご紹介します。「border」は要素の周囲四辺それぞれを囲むものですが、隣接する二辺の「border」が設定された時に、境界線の内側と外側の頂点を結ぶ対角線で要素が分けられ
誰のため？何のため？Webサイトを作り始める前に。 | Webクリエイターボックス
2020年8月4日 Webサイト制作 こんにちは！ついにWebクリエイターボックスのサイトが完成しました！これからこのサイトと、制作者のManaをよろしくお願いします！さて、さっそくですが最初の記事、Webサイトを作る前にすること。突然Photoshopを立ち上げてデザインを始めても、ユーザーが必要とするWebサイトが出来上がる可能性は極めて低いと思います。デザインやコーディングを始める前に、「このWebサイトは何のために作るのか」「誰がどのようにこのサイトを使うのか」をまとめておきましょう！ ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その1 目標：Webサイトを作る目的を明確にする 必要なもの：紙とペン 対象レベル：超初心者OK！ 目次 誰のため？何のため？Webサイトを作り始める前に。 ←今ここ Webサイトの構成図を簡単に作れる便利ツール Webサイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フォントアイコンの使い方 (FontAwesome)
http://cosao.net/archives/5137
商用利用無料！Bootstrap 3, Bootstrap 4をベースに最近のUIデザインのトレンドを取り入れた新作テーマのまとめ
イラストがすべて無料 「イラストAC」 トップページ
ブートストラップスターターテンプレート
