【爆速UI設計術】モダンなwebデザイン素材集 - Qiita
特徴 女性らしいイメージがやや多い 下記のような柔らかい印象のイラストが多いです。 【ガジェットストック】 ガジェット関連のものを使用したい場合は、下記を使用すると良いと思われます。 【アイコン系】 【human pictogram 2.0】 オリンピックで流行ったやつです。 本サイトでは、アタッチメントをつけたりすることでかなりカスタマイズ性が高いのが特徴です。 【EXPERIENCE JAPAN PICTOGRAMS】 特徴 海外から見た日本が表現されている これはシンプルにUIが凝ってたので紹介します。 和テイストを演出したい場合は、良さそうですね！ 【ICOOON MONO】 こちら色・サイズも変更可能です！ 【Icon-rainbow】 ICOOON MONOと異なり、こちらは、中が肉抜きされているのが特徴。 【IFN FREE ICONS】 このデザインはどのようなパターンにマ
いまWebがすごい！参考にしたい話題の最新ウェブデザイン37個まとめ
この記事では、デザイン制作のインスピレーションや参考にしたい、2020年に入って注目を集めている最新ウェブサイトデザイン37個をまとめています。 2019年の暮れに公開されたサイトも含み、多彩なアニメーションや鮮やかな配色カラーパレット、ストーリーテリング手法など注目のスタイルを揃えました。また、高級感のあるサイトデザインが特に多いシリーズとなりました。 いまWebがすごい！参考にしたい話題の最新ウェブデザイン37個まとめ Sussex Royal イギリス王室からの離脱や、王室を連想させる「サセックス・ロイヤル」の商標登録など、なにかと話題となっているサイト。閲覧できるのは今のうちかも。 Spotify for Pets 自分の聴いている音楽、ジャンルをもとに、愛犬などのペットに合ったプレイリストを自動生成してくれるオンラインサービス。 Coachella 毎年チケット販売とともに完売の
ユーザーに直感的で分かりやすいボタンとは、UXの観点からくわしく解説
ボタンのクリックレートが低い、ボタンを配置したページにユーザーが長い時間を費やしている、これはボタンが直感的でなく、分かりにくいボタンが原因かもしれません。 コンテンツにおけるボタンの配置、ボタンの形状、導線に基づいた配色など、ユーザーに直感的で分かりやすいボタンをUXの観点から詳しく解説します。 5 Techniques to Make Mobile Call to Action Buttons Intuitive by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ユーザーが分かりやすいボタンとは 1. スキャンパターンに従ってボタンを配置する 2. 形を使って、ボタンをテキストから区別する 3. プログレッシブアクションにカラーを追加する 4. ラベルにあるテキストの太さを変える 5. 優先度の高
ウェブデザイン制作が爆速に！便利な最新オンラインツール47個まとめ
ウェブデザイナーやグラフィックデザイナーのデザイン制作をスピードアップさせる、便利な最新オンラインツールをご紹介します。 ゼロから作ると時間のかかってしまいそうなことも、これらのツールを使うことで大幅に制作時間を短縮できるツールが揃います。今後のデザイン制作のワークフローに取り入れてみてはいかがでしょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. モックアップツール 2. デザインツール 3. デザインからコードへの変換ツール 4. プロトタイプツール 5. サウンドツール 6. アイコン素材パック 7. コラボレーション、共同作業ツール 8. 面白ツール 9. フォント、書体ツール ウェブデザイン制作を爆速に！便利な最新オンラインツールまとめ モックアップツール Design Camera アニメーション付きの３Dモックアップを数秒で作
追従ヘッダー実装時に使える動作・デザインパターン例 - NxWorld
常にユーザーの視線に入るようにしておきたいとかサイトの回遊率をあげたいなどの理由で実装を頼まれることが多いと追従ヘッダー。 単純に基本となる見栄えを維持してそのまま追従させることも多いですが、少し変化を加えてほしいという要望をもらうことも少なくないので、そういった場面で提案しやすいようによくある動作・デザインのパターン例をまとめました。 紹介しているサイトの動きや見栄えは、いずれもPCでの表示確認時のものになります。 変更を加えずにそのまま追従 スクロール時にデザイン・位置とも特に変更を加えず、単純にファーストビューでの見栄えをそのまま維持して追従させるパターンです。 少しCSSを書くだけで容易に実装できる�点がメリットですが、ヘッダーの領域が広いデザインの場合は�その分コンテンツが見える領域が狭くなるというデメリットがあるので、仕様やデザイン上でどうしてもヘッダー領域が広くなってしまう場
ブーム到来か。ノングリッドデザインの魅力と参考になるWebサイト | Web Design Trends
既存の枠に囚われず、自由に画像やテキストをレイアウトする「ノングリッドデザイン」のWebサイトがここ最近で多く見られるようになってきました。 近年オリジナリティがWebデザインに強く求められるようになってきていて、従来のルールに従わず、個性を強調したようなWebサイトが増えてきていますが、ノングリッドデザインはまさにその特徴的な例の1つです。 今回はノングリッドデザインについて詳しくご紹介していきたいと思います。 2019年に流行するWebデザインの最新トレンド18個まとめ そろそろ2018年も終わりを迎え、2019年がやって来ようとしています。この1年でWebデザインのトレンドにも様々な変化がありましたが、2019年はどのようなWebデザインの手法が流行するのでしょうか... Web Design Trends ノングリッドデザインとは 一般的なWebサイトでは、縦方向や横方向に区切って
レスポンシブ対応！縦に半分割しているWebサイトの作り方
2017年1月16日 CSS, Webデザイン, スマートフォン 画面を大胆に縦に割ったレイアウトのWebサイトが流行中。複数のセクションで分割しているサイトもありますが、中でも多く取り入れられているのが真っ二つに分けている半分割のレイアウト。インパクトがあって注目を集められる上、スクロールをせずに複数の情報を表示できます。今回はそんな縦半分割のレイアウトを使ったWebサイトの作り方と、実例をいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ 縦に半分割しているWebサイトを作ってみよう！ Dropboxのガイドラインページでは、ユーザーガイドと管理者ガイドが同レベルの重要度としており、ふたつのコンテンツを横並びにして表示しています。このように複数のコンテンツを同じ重要度で見せたい時に縦分割のレイアウトが活かせます。 幅の狭いデバイスで見るとカラムが縦並びに変更されます。 今回
UIのビジュアルデザインにおけるちょっとしたコツをまとめた「Little UI Details」
TightenやLaravelのデザインを担当したSteve Schoger(@steveschoger)さんによる、ビジュアルデザインにおけるコツをまとめたモーメント「Little UI Details」が公開されています。 Little UI Details https://twitter.com/i/moments/880688233641848832 明るい背景色上に白色のテキストを追加する場合、微妙に影を付けると、文字が見えやすくなるだけでなくよりポップになります。 Adding a subtle shadow to white text when on a bright background not only makes it more legible but helps it 'pop' more. pic.twitter.com/p9rudeFxvP— Steve Scho
ハンバーガーメニューが進化中！2018年に押さえておきたい最新トレンド5個まとめ
はじめにハンバーガーメニューが登場したとき、デザイン業界の反応はさまざまでした。そこから数年が経ったいま、この単純な図形は、インターネットの世界に浸透しています。 ここにくるまでハンバーガーメニューは、特にアニメーションの分野において、新しいレベルの洗練されたスタイルへと進化してきました。CSS3に加えて、SVGやキャンバスは、ユーザーエクスペリエンス全体を高める複雑で、シームレスなコンテンツ遷移を作成するのに利用されています。また、オーディオの利用もより普及してきており、メニューの使いやすさをユーザーに提供しています。 ハンバーガーメニューのレイアウトも、より複雑になってきており、サイトのナビゲーションメニューだけでなく、さまざまなコンテンツを配置しているケースが増えています。 この記事では、2018年以降に増えてきそうなハンバーガーメニューのクリエイティブな最新トレンド5つをご紹介しま
デザインの引き出しを増やしておこう！最近のWebサイトで見かけるデザインの新しいテクニックのまとめ
新しいデザインを見かけるとワクワクしますよね！ 2017年も半年が過ぎ、さまざまな新しいデザインを見かけるようになりました。最近のWebサイトで見かけるデザインのテクニックとその使い方を紹介します。 3 Essential Design Trends, July 2017 3 Essential Design Trends, June 2017 3 Essential Design Trends, May 2017 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ダウンページ ナビゲーション ボックスをデザイン要素として使う 垂直のライン 小さいテキストの要素 幾何学的なレイヤー ぼかしを使った画像 スクリーンいっぱいのヒーローイメージは後退 斜めを使ったレイアウト 分かりやすいアクションボタン ダウンページ ナビゲーション ナ
ユーザーが喜ぶ、効果的で使いやすいナビゲーションメニューの重要ポイント10個
ウェブサイトに欠かせないナビゲーションメニューの設計には、正しい方法と明らかに間違った方法があります。このウェブサイトの基本パーツのひとつは、しばしば設計プロセスでも見過ごされがちで、使いやすさにも影響してきます。 ごちゃごちゃな見た目や、メニュー数が多すぎたり、そもそもナビゲーションがなかったりといった問題が一般的で、単純にウェブサイトの仕上がりが悪くなってしまいます。ここでは、ウェブサイト制作で使用できる、効果的で使いやすいナビゲーションメニューの重要ポイント10個をご紹介します。 ハンバーガーメニューはもう古い！代わりに使えるモバイル用ナビメニュー5つまとめ ナビメニュー100連発！CSSで表現できるコピペ可能なHTMLスニペットまとめ 01. メガメニューはやめよう。 メガメニューは、特にクライアントに人気の流行であったと言えるでしょう。多くの項目をリストアップしたメニュースタイル
フッターデザインのアイデアに使える！サンプルやスマホ版のデザインなど弊社実績をご紹介 | 株式会社WEB企画
Webサイトの制作を行う際、どちらかというと重要度が下がりがちなフッターのデザインですが、弊社が運営するWebメディアではフッターデザインにかなりのパワーを注いでいます。 というのも、運営するWebメディアの各記事は4,000文字を超える長文で構成されているページが多く、全て読むのにすごく疲れてしまう人もいるのではないかと考えています。 そんな長文を全て読み終えてくださったユーザーが少しリラックスするようなコンテンツをフッターで表現できれば、とそんな考えからフッターデザインにこだわるようになりました。また親しみを感じてもらいファンになってもらうことができれば、という思いも込められています。 今回は、これからWebサイトを制作される方へ、弊社が運営しているWebメディアのフッターデザインのこだわりポイントをお伝えし、制作の際のアイデアやヒントになればと思い、その手法をご紹介いたします。（コー
【初心者向け】HTMLタグに直接CSSを指定して使える囲み枠いろいろ - おとなんつづり
ブログを書いていると、文章を枠で囲んで表示させたい時がありませんか。 でも実際にどう書けばよいのか私を含め初心者には少々難しいですよね。そこで今回は、先輩方のサイトを参考に自分なりに加工した囲み枠をご紹介します。 はじめに タイトル付き囲み枠 色タイトル付き・角丸 色タイトル付き・四角 枠の中に入ったタイトル タイトルなし囲み枠 シンプルな囲み枠・少し小さめ シンプルな囲み枠・画面いっぱい 見出し代わりや目立出せたい文字に 同じ色を使った囲み枠と下線セット 短い囲み枠（ボタン風） 左寄せボタン風 中央ボタン風 右寄せボタン風 最後に 追記 はじめに 本格的にブログをはじめて、ようやく１年が経とうとしています。 CSSもHTMLも詳しくない私は、枠を１つ使うにも時間がかかって大変でした。ひょっとして、同じように苦労されている方がいらっしゃるんじゃないでしょうか。 そこで今回は自分で使って便利
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
Webデザイン初心者がランクアップするためのCSSのコツ10選
ブログを始めたりホームページを自作したりするために勉強しはじめると、さらにデザインを凝ったものにしたくなります。 また、ある程度カスタマイズが進めば、表示速度をもっと早くしたり、より短いコードでコーディングしたりしたくなります。 そこで必ず話題に上るのが、CSSです。 もちろん、LessやSassのようなCSSプリプロセッサー(関数を使ったりしてプログラミングコードのように書くことができるCSS)が誕生したことで、より複雑なデザインをできるだけ少ないコードで書くことができるようになりました。 しかし、フロントエンドエンジニアとしてレベルアップするためには、どのように書けばレイアウトが改善されたり表示速度が速くなるのかをしっかりと理解しておいたほうがよいでしょう。 今回は、Webデザイン初心者がランクアップするためのCSSのコツをご紹介します。 これから紹介する、多くの初心者を泣かせたCSS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作者が備えておきたい最新版チートシートのまとめ | コリス
DMM動画サービスの問題を解決しようとしている話（スタイルガイド編） - DMM inside
The Blog | Welcome to Adobe Blog
ヘッダ・フッタ・ナビゲーションなど、最近のWebデザインで採用されているアイデアのまとめ -Good Web Design
デザインのアイデアが豊富！最近のWebデザインで採用されているレイアウトやUI要素が揃った素材のまとめ
