毎日新しいWebデザインを手掛けていれば、レイアウトや構成が思い浮かばないことがあっても当然です。 そんなときは新しく公開された、話題になっている国内外のホームページを覗いて、次のデザインアイデアやヒントを手に入れましょう。 この記事では、ここ2か月くらいで公開されたデザインが際立つ最新ホームページ事例40個をまとめてご紹介します。 どのようにUIデザインテクニックを活用するのか分かる、目からウロコの事例を中心に集めています。 Webデザイン見本リスト こがしバターケーキ スクロールで袋に入ったこがしバターケーキが下へと移動するようなエフェクトは、その手があったかと思わせるユニークさ。使用されているキアロフォントもブランドイメージにぴったり。 採用サイト｜株式会社 伊藤農園 | ページ全体に散りばめられた素敵な手描きイラストはもちろん、水平スクロール型コンテンツなど読みやすさも工夫されたデ

ホームページやブログに「動き」を加えると、ユーザーの目を引くと言われています。でも正直、わたしも最初は「そんな派手なアニメーションなんて要る？」と軽く考えてました。 特にスクロールアニメーションは加減が難しく、やりすぎるとページが重くなったり、逆に何も伝わらなかったり…。 しかし、アニメーションの基本ルールに沿って適切に使えば、サイト全体の印象を大きく変える強力な武器になります。 今回は、そんな動きをつかった最新の実例サンプルをまとめてご紹介します。 「動き」を極めるWebアニメーション表現アイデア30選 Landing Page Concept for Foodtech Business by Bohdan Ratiiev for Zajno Foodtech Concept: Making of 3D Visuals by Barry for Zajno Fingrow – Finan

この記事では、Webデザインやグラフィックデザインの制作スピードが爆速になる、便利な最新オンラインツールをまとめています。 うまくツールやサービスを利用することで、時間や労力の必要な作業もラクラクこなし、よりプロジェクトを円滑にすすめることができるでしょう。気に入ったツールを制作ワークフローに取り入れ、さらなる制作スピードアップを目指しましょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次デザインツールWeb便利ツールFigma・モックアップツールユニーク・面白ツール デザインツール KRESKA.art – Drawing and Painting あらゆるブラウザ上で動作する無料のお絵描き＆ペイントツールで、シンプルで使いやすいインターフェースと、超リアルな書き心地や豊富なブラシコレクションが特長。 Public Work by Cosmos

この記事では、ウェブサイトを訪れたひとが思わず押したくなるボタンデザインをまとめてご紹介します。 どのボタンも基本、HTMLとCSS（JSもすこし）で作成されているので、手軽にコピペで利用でき、カスタマイズも自由自在。 ボタンをデザインするときに気をつけたいポイントをチェックしておけば、より効果的なボタンの使い方ができますよ。有名サイトのボタンをコピペできるサービスもおすすめです。 HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。 こんなことできるの?!最新HTMLテクニック・スニペット きらりと輝くコール・トゥ・アクションボタン すべてのモダンブラウザでサポートされるようになった@propertyを利用した新しいCSSの使い方エフェクト。細部まで洗練されあt、注目を集めるCTAボタン。 See the Pen Shin

目まぐるしく変化するWebデザインの世界は、新しい技術やテクニックが毎日のように登場し、追いかけるだけでも大変。 「Webデザインの最新テクニックを知りたいけど、時間が足りない」という方へ。 この記事では、話題になった人気テクニックを中心に集めているので、効果的にWeb注目ニュースをインプットできます。 しかもスニペットはコピペで利用でき、CSSのみでスタイリングされたものも多数。 HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。 こんなことできるの?!最新HTMLテクニック・スニペット Timed Cards Opening カード型の画像カルーセルのスライドに合わせて、背景のフルスクリーンが切り替わる、ヒーロー要素を想定したスニペット。 See the Pen Timed Cards Opening by Dilum

アドビが先日、Photoshopの最新版2024年7月リリース、バージョン 25.11を発表しました。 新ツール「選択ブラシ」ツールから要望の多かった「ディテールの強化」まで、Photoshopベータ版から一般バージョンになった機能を含め、知っておきたいPhotoshopの新機能６つをご紹介します。 Photoshopをアップデート 注目したい新機能は６つ およそ3か月前の前回アップデートから新しく追加、強化された主な機能は以下の通りです。 最新バージョンPhotoshop 25.11ではどのようなことができるのか、詳しく見ていきましょう。 より柔軟に範囲を決める「選択ブラシ」 写真加工が直感的にできる「調整ブラシ」 画像をよりくっきりシャープに「ディテールを向上」 「箇条書きリスト」と「番号付きリスト」 コンテキストタスクバーが使いやすく（シェイプと変形） 最新Adobe Firefly

開発者にとっていかに早くWeb制作を進められるかは、永遠のテーマと言えます。 この記事ではWebサイト制作を効率化、爆速にするTailwind CSSのUIコンポーネント集、便利ツールをまとめてご紹介します。 表現したいレイアウトをコピペのみで実現でき、これまでかかっていたサイト制作時間を劇的に削減します。 おしゃれなWebサイトを素早く開発できるUIコンポーネント素材、あなたはいくつ知っていますか。 Tailwind CSSの便利UIコンポーネントまとめTailwind UIMagic UIDyna UIAnimataPrelineMamba UIFlowbiteDaisy UISailboat UIMeraki UITail-KitReact AriaWicked BlocksTailwind Starter KitWindstaticMyna UITailwind StampHype

Webサイト制作において面倒で時間のかかる作業を効率化したい方へ。 この記事は、CSSコードを手軽に生成できる便利ツールをまとめた最新版リストで、Web制作を快適、楽にしてくれるツール68個が揃っています。 以前CSS便利ツールを集めた厳選リストの公開が2021年。あれからおよそ3年のあいだに話題となったツールを中心に紹介しています。 日頃のワークフローに活用して、ストレスのないクリエイティブな制作ライフを実現しましょう。

ブラウザ上で簡単にデザインができるFigmaですが、人気の理由のひとつがプラグインを活用すれば自分好みにカスタマイズできる点でしょう。 たとえば、「できるだけ効率よく作業時間を短縮したい」というクリエイターの願いを叶えるAI機能を生かしたプラグインや、統一感のあるWebサイトに欠かせないデザインシステム作成プラグインなど用途によってさまざまです。 しかし、いざ探してみると、どこから見つけていいのか迷ってしまうほど膨大な数が公開されています。 そこでこの記事では、デザインをつくるときに役立つFigmaプラグインに絞り、リスト形式でご紹介します。 しかも、どれも無料。気になるアイテムはどんどん試してみましょう。きっとこれまで以上楽にデザインを作成できますよ。 このリストはこんな人におすすめ デザインのアクセントになる「あしらい」をさくっと作りたい どのプラグインを使えばよいか迷っている まわり

Adobeツールの乗り換えを検討し始めたけど、 「どこで見つければいいの？」「どんなツールを選べば後悔しない？」「代替ツールのいいところって何だろう？」「乗り換えのタイミング今なのか？」「費用の違いはどのくらい？」 普段から利用するツールだからこそ、自分にとって最適なデザインツールを知りたい方向けのリストとなっています。 Adobe Creative Cloudソフトから乗り換えたいと考えているひとへ どんな代替ツールがあるか知りたいひと いろいろツールを見たけどピンとこないひと 自分にあったツールが知りたいひと 代替ツールへの乗り換えで失敗したくないひと

目まぐるしく変化するWebデザインの世界は、新しい技術やテクニックが毎日のように登場し、追いかけるだけでも大変。 「Webデザインの最新テクニックを知りたいけど、時間が足りない」という方へ。 この記事では、話題になった人気テクニックを中心に集めているので、効果的にWeb注目ニュースをインプットできます。 しかもスニペットはコピペで利用でき、CSSのみでスタイリングされたものも多数。 HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。

CSSでボーダーをアニメーションさせるのは意外と難しいもの。幅や色のような単純な動きは別として、より複雑なアニメーションは他の選択肢を必要なケースがしばしば。 この記事ではCSSのborderプロパティを使わずにできる、”フェイク”ボーダーやアウトライン、さらにはSVGを使ったアニメーションの例を5つご紹介します。 最新Webデザインでもよく見かけるテクニックです、ぜひ活用してみましょう。 これらの例のHTMLはすべて、外側の.card divと内側の.inner divから構成されています。詳しくはデモを参照してください。

「Webサイト制作がもっと楽になる方法ってないの？」 「Web制作の最新ツールを試してみたい」 そんな方へオススしたい、Webデザイン制作に役立つツールや素材をまとめてご紹介します。 「これ、もっと早く知りたかった」と思うような便利ツールを中心にセレクトしています。 2024年のデザイントレンドにもぴったりな新Webテクニックを、次のプロジェクトに活用してみてはいかがでしょう。 一緒に最新デザイン素材やツールも目を通しておくと良いでしょう、特に今回は豊作でした。

私は10年以上にわたり、「最先端の人気デザインを探る」ために数多くののデザイントレンドを調査してきました。 2024年も2ヶ月が過ぎ、今年人気になりそうなデザインスタイルが少しずつ見えはじめています。 この記事では、グラフィックやWebデザインなどさまざまな分野で注目されているデザイントレンドを詳しく調べてみたのでご紹介します。 デザインで魅了する最先端のスタイルや、革新的なAIツールなど「今後どうなる？」を深掘りしてみました。 Design Trends 2024 Webデザインからグラフィックデザインまで幅広い、クリエイター注目リスト 人間とAIを手を組んだ「AI生成アート」 表現豊かな「タイポグラフィ」 奥行き感と立体感を生み出すホログラム素材 美しく、不必要な要素がない「ミニマル＆ブルータリズム」 サブバドール・ダリなどから影響を受けた「３Dシュルレアリスム」 ２０２４年に注目した

オシャレでかわいくて、商用利用もできるフリーフォントを探しているときに参考にしたいフォントサイトをまとめています。 ここでは、無料でダウンロードでき、プロジェクトを魅力的するフリーフォントを揃えたおすすめサイトをリスト形式でご紹介します。 多くのサイトが集めているフォントは、SILオープンフォント（OFL）という商用利用も無料という、ありがたすぎるライセンス。 定期的に集めている新作フリーフォントの多くも、実はこれらのサイトから見つけるのがほとんどです。 「とにかくデザインの良いフォントが欲しい」というあなたの願望を、きっと叶えてくれるでしょう。

デザインをするときに、頭を抱えがちな「配色どうしよう」問題。いかに手早くイメージに合った色を選べるかがカギになってきます。 各デザイン用途に役立つ配色ツールも十分便利なのですが、AIの力を借りることで誰でもより簡単に、これだ！と感じる色に巡り会えるかもしれません。 この記事では、AIを活用した配色ツールをまとめてご紹介します。 実際にわたしがツールを試した使用感、デザイン制作に役立つと感じた点と一緒にまとめています。

「無料で使えるフリー画像を見つけたい」という話は、ホームページやグラフィックなどクリエイティブな業種では、よく耳にします。 しかし同時に、「目的の一枚が見つからず時間だけが過ぎてしまった」なんて経験がある人も多いのが事実です。 フリー画像を効率的に探しコツは、目的や用途にあったサイトで素材を見つけること。 この記事では、商用利用できるフリー画像サイトを国内・海外に分けて一挙にご紹介します。 利用者の多い定番サイトから、あまり知られていないレアなサイトまで集めています。 ８年前の2016年12月7日に公開した記事を、最新版にアップグレードしてお届けです。 国内フリー写真素材サイト ここでは、商用利用できてクレジット表記も必要ない「フリー画像」を無料ダウンロードできるサイトをご紹介。 ここでの選定ポイントは、以下の通り。 日本人や日本の伝統、和柄など国内向けの画像素材が豊富 日本語によるキーワ

2023年も終わりに近づき、この1年間に収集したツールを振り返りながら、Web制作に役立つお気に入りを見つけてみましょう。 素晴らしい新ツールや素材がたくさんリリースされ、選定にはたっぷり時間がかかりましたが、カテゴリ別に幅広くセレクションできました。 本当に役立つかどうかだけを考え、「これ、神ツール。」と思えるものをピックアップ。 話題の的だったAIをうまく活用すれば、ワークフローを格段にスピードアップさせ、面倒な作業もストレスなくこなすことができます。 この記事では、そんなあなたの役に立つ2023年公開のWebデザイン制作ツールや素材をまとめてご紹介します。 整理したカテゴリは以下の通り。

今年も残すところあと少しとなり、振り返ってみると数えきれないほどのツールや素材がリリースされました。 「本当に役立つツールや素材を集める」をモットーに、2016年からおよそ8年間、定期的に最新ツールをまとめ続けています。 数で言えば、３０００個以上。 知っているか知らないかの違いで、作業時間を大幅に短縮し、売り上げが2倍にワープしたことも何度もあります。 このような経験があるからこそ、ハッキリ言えることがあります。 それは、無料で使える素材を知らずに損している人が、あまりにも多いということ。 残念ですが、あなたの素晴らしい商品やサービスの魅力が、ユーザーに全く伝わっていません。 でも、ご安心ください。 この記事では、そんなあなたの役に立つ2023年公開の無料デザインツールや素材をまとめてご紹介します。 整理したカテゴリは以下の通り。