tacarのブックマーク - はてなブックマーク

Webデザインに悩まない、心をつかむ最新サイト30選まとめ

Webサイトのアイデアに困ったときは、多くの優れた参考サイトを見ることが、次のデザインへとつながります。なぜなら、レイアウトや配色、文字組みなど実践的なプロのテクニックを学びつつ、変化の早いトレンドも確認できるのが理由です。この記事では、デザイナーが参考にしたい最新ウェブデザイン30個をまとめてご紹介します。クライアントとの打ち合わせ時のサンプル見本や、「ああしたい、こうしたい」というデザインの共有にもおすすめです。 Webデザインに悩まない、心をつかむ最新サイトまとめ YOLU[ヨル]　ナイトケアビューティーブランド満点の星空をテーマに、流れ星のようなSVGラインアニメーションが素敵な、美容系ウェブサイト。 Shop MrBeast 2022年を代表する、90年代レトロブームの再来をテーマにしたウェブサイト。パステルカラーの配色や、ピクセルドット風フォント、くるくるまわるホバ

tacar 2022/09/15

デザイン

リンク

本当は教えたくないWebデザイン参考ギャラリーサイト37選

ウェブサイト制作には、常に新しいアイデアやインスピレーションが必要ですが、決まらずに悩んでしまうことも。そんな状況を打開するには、たくさんの優れたデザインの実例を見ることで、次のアイデアを生み出してみましょう。ここでは、最新ウェブデザインをいち早くチェックできるオススメWebギャラリーサイトを厳選してご紹介。インスピレーションとしてはもちろん、クライアントの打ち合わせやイメージの共有にも活用できます。積極的にインプットを増やし、デザインの引き出しを増やしてみましょう。このリストは2年ぶりにまとめ直したアップグレード版となります。コンテンツ目次【2024追加分】最新Webギャラリーサイト landing.love Design Spells Godly BentoGrids 404s Footer Navbar Gallery 国内Webギャラリーサイト SANKOU! URA

tacar 2022/05/19

デザイン

リンク

どう書くんだっけ？を一発解決！コピペ用コードスニペットを集めたオススメWebサイトまとめ

この記事では、コーディング作業で迷ったときに確認したいコードスニペットを集めた便利サイトをまとめて紹介しています。ウェブ開発において、フロントエンドやデベロッパーが悩んでしまう問題の解決方法を知ることができるだけでなく、世界中の優秀なプログラマーの作成したコードを確認、実際に動かしながら学ぶことができます。ちなみに、2020年に人気だったコードスニペットランキングがこちら。 2020年にCodepenで話題！コピペ可なHTMLスニペットベスト100発表どう書くんだっけ？を一発解決！コードスニペットを集めたオススメWebサイトまとめ CoddMyUI Javascript、HTML、CSS、jQueryプラグイン、ウェブ開発にできるデザインスニペット1200個以上が揃ったサイト。ボタンやホバーリンク、テキストアニメーションなど細かくカテゴリ分けされているので、必要なパーツごとのコー

tacar 2021/01/28

リンク

Web最新テクニックはこれ！コピペで実装できるすごいHTML/CSSスニペット68個まとめ

この記事では、Webサイトやモバイルアプリにあっと驚くエフェクトを、コピー&ペーストで実装できる最新 HTML/CSS スニペットをまとめてご紹介します。スニペット（英: Snippet）とは、一般的に「切れ端、断片」といった意味で、ウェブサイトなどのプログラミングで簡単に切り貼り、再利用できる部品を指します。これらのスニペットを利用すれば、他のサイトではあまり見かけない差のつくデザインエフェクトを実現できます。今後のウェブ制作に活用してみてはいかがでしょう。ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。コンテンツ目次 1. イメージスライダー系 2. テキストエフェクト系 3. テキストエフェクト系スニペット 4. ページレイアウト系 5. ナビゲーションメニュー系 6. ホバーエフェクト系 7. SVGアニメーション系 8. 便利、面白系スニペット 9.

tacar 2019/05/11

css

リンク

超便利！確認しておきたい最新CSSツール、リソースガイド 2018年度

ここ数年起こっているCSSの変化と急速な進歩により、絶え間なくリリースされている膨大な量のオープンソースのツールには驚かされます。制作時間を節約、短縮できるCSSライブラリやフレームワーク、およびツールは、制作をより手軽に、より簡単にすることを目的に構築されており、理解できていないCSSに関しては学習用ガイドなども数多く提供されています。このコレクションでは、2018年にリリースされた50種類のお気に入りCSSライブラリ、フレームワーク、リソース、便利ツールをまとめてご紹介します。ユニークなアイデアを形にできるツールがきっと見つかりますよ。 1. CSS レイアウトフレームワーク 2. CSS Flexbox フレームワーク 3. CSS ライブラリ 4. お役立ちCSSユーティリティ 5. オンラインCSSツール/生成ツール 6. CSS画像エフェクトツール 7. CSS学習リソース

tacar 2018/06/08

css

リンク

レベル高っ！商用可能な無料HTMLテンプレート200+種類を配布しているサイト Colorlib

商用プロジェクトでも利用でき、モバイル端末でのサイト表示にも対応した高品質なHTMLテンプレート素材を200種類以上公開しているサイト Colorlib を今回はご紹介します。レスポンシブデザイン対応はもちろん、Bootstrapフレームワークを利用したものが中心で、カスタマイズも手軽に行うことができます。ホームページを作成しよう！無料で使える高品質HTMLテンプレート26個まとめ 2018年4月度無料で最強！レスポンシブ対応の高品質HTMLテンプレート23個まとめ 2017年10月度 HTMLテンプレートのライセンスについて Colorlib で公開されている200種類を超えるHTMLテンプレートは、どれも Creative Commons Attribution 3.0 License （CC BY 3.0）となっています。HTMLテンプレートを無料ダウンロードするときは、以下の点

tacar 2018/05/26

テンプレート

リンク

Webサイトを使いやすく！UIデザインのCSS小技テクニック21個まとめ（実例サンプルコード付）

素敵なインターフェースを心がけ、ユーザーエクスペリエンスを格段に改善することができる、UIデザインの重要ポイントを具体的なHTML/CSSのサンプル例と一緒にご紹介します。これらの各ポイントは、もともと@steveschogerがTwitterでツイートした内容となります。 1. アイコンはラベルよりも少しだけ明るくしよう。文字ラベルの横にアイコンを配置するときは、少しだけ色を明るくしてみましょう。こうすることで、もっとも重要な情報（文字ラベル）をうまく強調することができます。 See the Pen Little UI Details : 小技テクニック01 by PhotoshopVIP (@vipcrew) on CodePen. 2. 明るい背景色では、白文字に少しだけ影を追加しよう。背景色が明るく、白文字を利用するときは、文字に少しだけ素敵な影を加えることで、より読みやすくな

tacar 2018/01/23

webデザイン

リンク

【Bootstrap製】90ページ超えの無料HTML5／CSS3テンプレート素材 Titan

ウェブサイトやアプリ制作に必要なスタイルがあらかじめ定義された、人気CSSフレームワーク Bootstrap。しかし、デザインが他のサイトとかぶってしまうとお悩みの方も多いのではないでしょうか。今回は、Web制作をより手軽に行うことができる、Bootstrap対応の無料HTML5/CSS3テンプレート素材 Titan をご紹介します。90ページにおよぶ大量のサンプルHTMLページが用意されており、あらゆるプロジェクトに活躍してくれるフリー素材となっています。 Bootstrap を拡張パワーアップ！参考にしたい50個の無料プラグイン、コンポーネントまとめ無料HTML/CSSテンプレート Titan について Titan はHTML5/CSS3で制作されたBootstrap対応テンプレートで、過去5年間のウェブデザインの傾向を分析して作成されたスタイリッシュな素材です。じっくりと検討さ

tacar 2017/06/22

bootstrap

リンク

ウェブ制作の面倒をズバリ解決！オススメChrome拡張機能23個まとめ

ウェブサイトやグラフィック制作をより快適にし、生産性をアップさせてくれるChrome 拡張機能をまとめてご紹介します。ウェブ制作に携わる、すべての人にオススメです。便利なオンラインツールを一緒に活用して、自分だけの爆速Web制作スタイルを目指しませんか。 What Font ウェブサイトで使われている、フォントの種類を知りたいと思ったことはないでしょうか。これまではFirebug や Webkitなどを利用していましたが、What Font を使えば、気になる書体をマウスクリックするだけで確認できる、シンプルさが便利なツール。 Fontface Ninja Fontface Ninja は、ウェブサイトで使われているフォントをカーソルを合わせるだけで確認できるだけでなく、その場で購入までできます。ウェブデザイナーは持っておきたい拡張機能のひとつ。 Window Resizer Window

tacar 2017/05/09

chrome

リンク

ウェブサイト制作に欠かせない、アニメーション人気テクニック4つまとめ

機能的で楽しいアニメーションは、現代のウェブデザインに欠かせない重要な要素のひとつです。論理的に考えられたアニメーションを活用することで、ウェブサイトに大きな違いを生み出します。アニメーションはステータスを伝えたり、注意を引くことはもちろん、ユーザーの行った行動の結果をうまく表現できます。今回は、より快適なウェブサイト体験を実現するために加えたい、アニメーションの制作テクニックをサンプル例と一緒に詳しく見ていきましょう。進行状況（英: Progression）ローディング・アニメーションウェブデザインに使われるアニメーションでもっとも一般的なもので、ページの読み込みに関係しています。ローディング・アニメーションは、コンテンツを読み込むまでの待ち時間をユーガーが短く感じられるように工夫されています。シンプルな動きがローディング・アニメーションにとって最適で、音や余計なエフェクトなど

tacar 2017/02/09

ローディング

リンク

Web開発を爆速にする！Sublime Text 用のすごい拡張プラグイン厳選15個まとめ

Sublime Text は現在もっとも人気のあるコードエディタのひとつです。そのスピードとシンプルさ、豊富なプラグインで多くのプログラマーに愛されています。最大限に Sublime Text を活用するために、今回は普段よく利用している拡張機能をまとめてご紹介します。詳細は以下から。 Package Control まずはじめに Package Control をインストールしなければ始まりません。Sublime Text の拡張機能を管理するためのパッケージで、これなしで拡張機能のインストール、削除も大変な作業となってしまいます。今回紹介するプラグインをインストールする前に、まず最初に行いましょう。詳しいインストール方法については、こちらのページを参考にどうぞ。 JavaScript & NodeJS Snippet より素早くJavaScriptを記述することができるスニペットの

tacar 2016/10/20

Sublime Text

リンク

Bootstrap を拡張パワーアップ！参考にしたい50個の無料プラグイン、コンポーネントまとめ

Webデザイン制作で人気の Bootstrap フレームワークには、役立つツールやコンポーネントがあらかじめパッケージされており、すぐにサイトやアプリの制作をはじめることができます。しかし、ときには必要な機能が十分に揃っていないケースがあるのも事実です。この記事では、Bootstrap の機能を最大限に拡張できる、50種類のプラグインやアドオン、コンポーネントをまとめてアルファベット順にご紹介します。ここでは、ボタンやパンくずリスト、カレンダー、ツリーメニュー、ビデオプレイヤー、WYSIWYGエディターなどウェブ制作に必要な機能をすべてまとめています。今後のプロジェクトに活用してみてはいかがでしょう。制作に活用したいBootstrap 用プラグイン、アドオン、コンポーネント（アルファベット順）アクセシビリティ（英: Accessibility） Accessibility Plu

tacar 2016/10/05

Bootstrap

リンク

プロデザイナーから学ぶ、ウェブサイトを良くするために心がけたい15個のポイント

デザインのキャリアをはじめるとき、良いアプローチのひとつとして基本デザイン原則を学び、そしてそれらをうまく使い、きちんとした土台を今後のプロジェクトのために作ってみましょう。 Image Source: Jared Granger 制作を通じてノウハウを知ることで、より多くのテクニックを学び、自分の予想を超えた良いアイデアを作成できるようになるでしょう。プロのデザイナーから学ぶことは、ウェブデザインのスキルを改善するのにもっとも最適な方法といえます。今回は、ウェブデザインを改善する15個のテクニックを見ていきましょう。詳細は以下から。 01. 憧れのデザイナーを追いかけよう。デザイナーによって好みのデザインレイアウトやエフェクト、コンポーネントは違うもので、それらを真似してみましょう。すごいと言われるアーティストでさえも、最初はここからはじめています。まずは通らないわけにはいかないでし