すぐにできる！UIデザインが劇的に変わる7つの秘密テクニック
この記事はRefactoring UIの著者Adam Wathan ＆Steve Schoger がMediumに投稿した「7 Practical Tips for Cheating at Design」を、許可をもらい日本語抄訳しています。 ウェブ開発者であれば、一度はビジュアルデザインの判断を迫られる場面に遭遇したことがあるでしょう。 フルタイムのデザイナーがいない会社で、新しい機能のUIを自分で実装しなければならなかったり、サイドプロジェクトに取り組んでいて、平凡なBootstrapのサイトよりも見栄えを良くしたい場合などもあるでしょう。 「自分にはデザインのセンスがないから、これをカッコよくするのは無理だ！」 そんな風に諦めてしまいがちですが、実はグラフィックデザインの知識がなくても、デザインをレベルアップさせるためのコツがたくさんあります。 今回は、すぐにでも使える7つの簡単なテ
間違っていませんか？美しいUIではラベルは最後の手段【実践編】
Refactoring UIで公開された「Labels are last resort」より許可をもらい、日本語抄訳しています。 ユーザーにデータを表示するとき（特にベータベースから読み込むとき）、一般的なlabelプロパティを使って表示するという罠に陥りがちです。 すべてにラベルを利用した悪い例？ このアプローチの問題点は、データをなにかしらの階層構造で表示することが難しくなること。どのデータも等しく重視されるようになります。 ラベルはまったく必要ないかもしれない 多くの場合、書式を見るだけで、そのデータが何であるか直感的に理解できます。 たとえば、nanashi@example.comはメールアドレス、(619)765-4321は電話番号、￥980は価格といった具合です。 フォーマット形式が分かりにくいときは、コンテンツにすでに含まれていることもよくあります。たとえば、従業員名簿で誰か
売れるウェブの最新HTML/CSSテクニック40選
目まぐるしく変化するWebデザインの世界は、新しい技術やテクニックが毎日のように登場し、追いかけるだけでも大変。 「Webデザインの最新テクニックを知りたいけど、時間が足りない」という方へ。 この記事では、話題になった人気テクニックを中心に集めているので、効果的にWeb注目ニュースをインプットできます。 しかもスニペットはコピペで利用でき、CSSのみでスタイリングされたものも多数。 HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。 こんなことできるの?!最新HTMLテクニック・スニペット Timed Cards Opening カード型の画像カルーセルのスライドに合わせて、背景のフルスクリーンが切り替わる、ヒーロー要素を想定したスニペット。 See the Pen Timed Cards Opening by Dilum
本当は教えたくない2023年の英語・日本語フリーフォント120選【商用可】
当サイトでは、毎月新しく公開されたフリーフォント素材をまとめて紹介しています。 この記事では、2023年にリリースされた、商用利用できる完全無料の英語・日本語フリーフォントを集めました。 2023年は、特に数多くの日本語フリーフォントが公開されました。 おしゃれな英語フォントから高級感のあるセリフ書体、人気定番の筆記体、手書き、ブラシフォント、ビンテージ、ディスプレイなど。 幅広いカテゴリよりフリーフォント素材120個を厳選しているので、自分の「推しフォント」を見つけてみませんか。 「日本語フォントをまとめてダウンロードしたい」 「できるだけ安く、仕事でも安心して、フォントを使いたい」 そんなときは、20,000以上の英語フォント、日本語フォントも500以上を使い放題の、Adobe Fonts（アドビフォント）がオススメです。 その理由はずばり、Adobe CCユーザーなら、すべて無料で、
便利で差がつく、ずるいWeb制作ツール・素材90選【2023年ベスト】
2023年も終わりに近づき、この1年間に収集したツールを振り返りながら、Web制作に役立つお気に入りを見つけてみましょう。 素晴らしい新ツールや素材がたくさんリリースされ、選定にはたっぷり時間がかかりましたが、カテゴリ別に幅広くセレクションできました。 本当に役立つかどうかだけを考え、「これ、神ツール。」と思えるものをピックアップ。 話題の的だったAIをうまく活用すれば、ワークフローを格段にスピードアップさせ、面倒な作業もストレスなくこなすことができます。 この記事では、そんなあなたの役に立つ2023年公開のWebデザイン制作ツールや素材をまとめてご紹介します。 整理したカテゴリは以下の通り。
秒速でデザイン！制作時間を半分に削る100の無料ツールと素材まとめ
デザインに興味があるあなたへ。 デザインは時間との戦い。アイデアを形にする時間を増やすためには、効率的なツールと素材えらびが不可欠です。 ここでは、初心者からプロのデザイナーまで利用したい、120のツールと素材を厳選、わかりやすくカテゴリ別に分けています。 そして何と言っても、これらは全て無料で利用できます。 デザイン制作がスムーズに進み、細部へのこだわりも容易になります。 デザインの効率化の一環として、これらのツールを使ってみてください。 これらのツールを使うことで、あなたのデザイン制作が一層楽になるでしょう。
UI要素1200以上！HTML/CSSを直接コピペできる便利ライブラリUIverse
Webサイトを訪れたユーザーが、もっとも重要視するのはUIデザインです。 ユーザーが直感的に操作でき、使いやすく、美しくデザインされたWebサイトは、長期的な成功につながります。 しかし、どんなUIデザインを作成したらよいか分からない、という声もよく聞きます。 そこで今回は、コピペで利用できるUIデザインライブラリ UIverse をご紹介します。 1200を超えるUI要素が公開されており、HTML/CSSをコピペするだけで、だれでも手軽に利用できます。 これらを押さえて、あなたのWebサイトをユーザーにとって魅力的で、使いやすくしてみましょう。 UI要素1200以上！HTML/CSSを直接コピペできる便利ライブラリUIverse UIverseではあらゆるプロジェクトに対応できる、HTML/CSSで作成されたオープンソースのUI要素を作成、共有できるウェブサイトです。 すべてのコードはM
動くWebデザインの最新アイデア28個まとめ
ウェブサイトやモバイルアプリを魅力的にしたいときは、アニメーションを利用すると良いでしょう。 その理由は、ユーザーの注目を無意識に集め、美しさも表現できるから。 さまざまなデザイントレンドとしても、毎年選出されており、まずます需要が高まっています。 実際に、多くの最新ウェブデザインでも採用されており、アニメーションに特化したCSSライブラリも数多く公開されています。 ワンランク上のウェブデザインを作成したいクリエイターに、ぜひ参考にしてほしいアニメーションのアイデアを、まとめてご紹介します。 動くWebデザインの最新アイデアまとめ Daily UI “Luxury Interaction Concept” 高級車の販売を行う、インタラクティブで実験的なコンセプトページで、クリックに応じたコンテンツ遷移が心地よいつくりに。
アイデアの宝庫！参考にしたい最新ウェブデザイン30選
ウェブデザインを作成するとき、アイデアが足りず、頭を抱えることもあるでしょう。 そんなときは、他のウェブサイトをのぞいてみましょう。 理由はずばり、インスピレーションを得られるのはもちろん、最新のデザイントレンドや人気テクニックを知るのに最適だから。 どのようなレイアウトや配色、フォントを使うべきか、ベストプラクティスを実例から学ぶこともできます。 この記事では、話題となっている最新ウェブデザインを国内外からセレクトしてご紹介。 ウェブデザインを改善したいひと、ウェブサイトをこれから作りたいというひとには、ぜひ参考にしてみましょう。 アイデアの宝庫！見逃せない最新ウェブデザイン30選 Hotel 23 南米コロンビアになる、建物全体が植物で囲まれた、ボタニカルなブティックホテルの公式サイト。 Unseen Studio スクリーン上でマウスが通過した部分は、時空が歪むような、ユニークで未来
Web制作を変える！2022年の便利オンラインツール・ベスト110選
Web制作を変える！2022年の便利オンラインツール・ベスト110選 これからのウェブデザインに欠かせないツール大集合 この記事では、2022年に公開された便利なWebオンラインツール・ベスト110個+をまとめてご紹介します。 定期的にリストアップしている最新オンラインツールまとめ記事では、2022年にかけて、合計343個の新しいツールやサービスを紹介してきました。 その中でも、Webデザイン制作に便利なツールを厳選したコレクションで、「無料で利用できるツール」を揃えています。 特に今年は、人工知能やAIテクノロジー関連のツールが増えたことで、Webデザイン制作をより快適に進めることができるでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 🕹 CSSツール（16個） 🧰 Webデザイン便利ツール（19個） 🦄 デザインツール
【総まとめ】2022年に話題になった世界ベストWebデザイン厳選50個
【総まとめ】2022年に話題になった世界ベストWebデザイン厳選50個 Webデザインに関わる、すべてのクリエイターの参考に 当サイトでは、新しく公開された最新Webサイトデザインを定期的にまとめています。 今回は、2022年のベスト・オブ・Webデザイン50個を厳選、ピックアップしご紹介します。 配色えらびやレイアウトの参考にぴったりで、今後のデザイン制作の参考にしてみてはいかがでしょう。 【総まとめ】2022年に話題になった世界のベストWebデザイン厳選50個 Drake Related アーティストDrakeの豪邸をオンラインツアーで巡りながら、レアな限定商品や楽曲の購入などできる、新しいEコマース体験ができるウェブサイト。 SeaCat 夢のようなスーパーヨットを、ふんだんなアニメーションとイラストで、インタラクティブに紹介するイタリア発のウェブサイト。 まくらのキタムラ ページス
コピペで簡単、おしゃれ無料Webレイアウト25選（CSS Grid・Flexbox活用）
「おしゃれでかっこいいウェブサイトを作りたいけど、レイアウトにいつも困る。」 「同じような似たデザインから抜け出せない」 「周りがあっと驚くWebデザインがしたい」 「CSS Grid や Flexbox プロパティの使いかたを覚えたい」 そんなひとにおすすめしたい、コピペで利用可能な、おしゃれでモダンなWebレイアウト25選をご紹介します。 すべてのテンプレートの特長が以下のとおり。 ✅ モバイルファースト・アプローチに沿ったレイアウト ✅ すべてのブレイクポイントに対応したレスポンシブWebレイアウト ❌ position: absolute;は利用しない ✅ CSS Grid テクニックのみで表現 最先端のCSSテクニックを活用することで、これまでは考えられなかった構図を実現できるようになっています。 コピペでできる、おしゃれな無料レイアウト25選（CSS Grid & Flexbo
おしゃれ英語フォント本命！商用OKな無料セリフ書体おすすめ40選
セリフフォントは、時代を超えて愛され続ける、歴史のあるクラシックな書体。 文字のストロークの端に小さな飾りが特長のセリフ書体は、より文字を認識しやすく、そして読みやすくしてくれます。 ここでは、商用利用できる本当に美しい英語セリフフォントを厳選してご紹介します。 7年ぶりのアップデート版となるこの記事では、豊富なリガチャやウェイト数など、デザイン面を重視した書体を中心に揃えています。 充実度ではプレミアム素材がおすすめ プレミアムフォントを使えば、ユニークでおしゃれなデザインをより手軽に表現することができます。 フリーフォントではむずかしい異なるウェイト数や、合字リガチャとデザインのバリエーションは抜群です。 ロゴ用テンプレートなども収録されているので、購入したらすぐにデザインを楽しむことができるのもプレミアム素材のメリットのひとつと言えるでしょう。 Eighties Comeback S
本当は教えたくないWebデザイン参考ギャラリーサイト37選
ウェブサイト制作には、常に新しいアイデアやインスピレーションが必要ですが、決まらずに悩んでしまうことも。 そんな状況を打開するには、たくさんの優れたデザインの実例を見ることで、次のアイデアを生み出してみましょう。 ここでは、最新ウェブデザインをいち早くチェックできるオススメWebギャラリーサイトを厳選してご紹介。 インスピレーションとしてはもちろん、クライアントの打ち合わせやイメージの共有にも活用できます。 積極的にインプットを増やし、デザインの引き出しを増やしてみましょう。 このリストは2年ぶりにまとめ直したアップグレード版となります。 コンテンツ目次 【2024追加分】最新Webギャラリーサイト landing.love Design Spells Godly BentoGrids 404s Footer Navbar Gallery 国内Webギャラリーサイト SANKOU! URA
サンプル付コピペOK！すごいCSSアニメーションライブラリ30選【2022年版】
ウェブサイトの印象を大きく左右する「動き」。 現役Webデザイナーがこれは外せない！というCSSアニメーションライブラリをまとめてご紹介。 任意の要素にクラスを付与するだけで、用途に応じたアニメーションを実装できる便利なライブラリを整理しています。 フワフワやユラユラ、ポヨンといった弾む系の動きから、背景アニメーションなどWebサイトの印象づくりに欠かせない動きが揃います。GitHubレポジトリのスター数が多いものを中心にセレクト。 コンテンツ目次 1. 万能CSSアニメーション 2. 文字エフェクト向け 3. ホバーエフェクト向け 4. 画像、背景向け 5. ふわふわ、ゆらゆら、面白系 6. ハンバーガーメニュー向け 7. クリエイティブなアニメーション 8. よりなめらかな動きを表現するには 9. アニメーションの参考リソース一覧 万能CSSアニメーション Animista 基本となる
【2024年】デザインが映える！今どきのかわいい無料イラスト素材13選
この記事では、無料ダウンロードできる今どきのかわいいイラスト素材をまとめています。 これまでにもイラストに関して定期的にまとめていますが、今回は比較的最近公開された最新イラスト素材やライブラリ、オンラインツールなどを中心に揃えています。 イラストを描く絵心がないと嘆く、非デザイナーのひとにオススメのお役立ち素材が揃います。 これまでのイラスト素材はこちら。 商用OK！今どきのおしゃれイラスト素材を無料ダウンロードできる優良サイト19個まとめ 全て無料、本当は教えたくないフリーイラスト素材サイト104個まとめ【商用OK】 ３Dデザイン作成に役立つ無料ツールとデザイン素材まとめ 2021年版 それでは、さっそく見ていきましょう。 【2022年】無料ダウンロードできる今どきイラスト素材まとめ ManyPixelsでは、立体感のあるIsometricスタイルの他に、使い勝手の良いモノトーンやアウト
わずかな時間で驚くほどWeb制作がはかどる最新オンラインツール43個まとめ
この記事では、Webデザイン制作を楽にする最新オンラインツール43個をまとめてご紹介します。 コピペで利用できるお手軽CSSツールやSVGツール、コード知識不要のノーコードツール、色に困ったときに便利な配色ツールなど、クリエイティブな案件で活用したい新しいツールを揃えています。 自分のワークフローにうまくツールを導入することで、制作時間の短縮につながるだけでなく、ストレス少なく作業を行うことができます。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. プロトタイプ、アイコンツール 5. コラボ、リモートワークツール 6. 面白、クリエイティブツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ Web制作便利ツール Layout Patter
なぞるだけで写真の不要なものを消せるウェブサービス Cleanup.pictures
「せっかく良い写真が撮れたのに、背景に不要なものや人が写り込んでしまった。」「シャツにケチャップのしみがついている」「写真にうつった文字を変更したい。」 誰ももこんな経験、一度はしたことがあるのではないでしょうか。 なぞるだけで写真の不要なものを消すことができる、魔法のようなオンラインツールCleanup.Picturesをご紹介します。 人やものなどの被写体、文字テキストなど、あらゆるものを写真から消し去ることができます。 写真の不要なものをなぞるだけで消すことができるWebサービス Cleanup.pictures CleanUp.picturesは、ほんの数クリックするだけで、写真の不要なものを消し、クリーンアップできる無料ウェブサービスです。 ものを消すだけでなく、削除した部分を自動かつ、正確に再描画してくれます。 操作はいたってシンプル。写真の不要な部分をブラシでなぞるだけで、あ
Web制作あるある「画像ない問題」を解決！ダミー画像の生成サービス15選
「準備はまだできていないけど、仮のダミー画像を入れておきたい」ウェブ制作中にそんな場面に遭遇することもあるでしょう。 この記事では、ダミー画像を手軽に生成できるジェネレーター、オンラインツールをまとめてご紹介します。 そもそもダミー画像とは？ ウェブ制作中に、「画像の準備はできていないけど、とりあえずレイアウトの確認だけでもしたい」、というときに利用する仮の画像、これが「ダミー画像」です。 画像のサイズはもちろん、スタイルなどもimgタグに直接記述するだけで、ダミー画像を表示できます。 試しに以下のようにimgタグを記述してみると、 <img src="https://placehold.jp/272343/ffd803/640x400.png"> ほんの少しの指定を行うだけで、サイトの雰囲気にあった色合いのダミー画像を用意することができます。サイズ指定も手軽なので、お気に入りのダミー画像
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザインが楽になる、ずるい最新ツール・素材40個まとめ
