コンセプトをうまく伝える最新Webデザインみほん帖37選
「ウェブデザインが浮かばないから、なにか新しいアイデアが欲しい」 「今後の案件で利用できる、最新Webデザイン事情を知りたい」 「ウェブサイト、なにから作ればいいかわからない」 そんなときに目を通したい、国内外の最新おすすめWebデザイン37選をご紹介します。 他のウェブサイトを見ることで、デザインのアイデアやインスピレーションにもつながります。 「こんな感じのデザイン、考えています」といった具合で、実際のページを開きながらの打ち合わせにもオススメ。 レイアウトや配色、フォント選びだけでなく、コンセプトをうまく伝えるウェブデザインを意識した制作に活かしてみましょう。 ウェブデザインの潮流をよむ、最新おすすめサイトまとめ Kubota Future Cube スタートボタンを押した途端に、キューブの中には未来の姿がひろがります。コンテンツの切り替えにもキューブをうまく活用した、没入感たっぷり
どう書くんだっけ？ を一発解決！コピペ用コードスニペットを集めたオススメWebサイトまとめ
この記事では、コーディング作業で迷ったときに確認したいコードスニペットを集めた便利サイトをまとめて紹介しています。 ウェブ開発において、フロントエンドやデベロッパーが悩んでしまう問題の解決方法を知ることができるだけでなく、世界中の優秀なプログラマーの作成したコードを確認、実際に動かしながら学ぶことができます。 ちなみに、2020年に人気だったコードスニペットランキングがこちら。 2020年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表 どう書くんだっけ？ を一発解決！コードスニペットを集めたオススメWebサイトまとめ CoddMyUI Javascript、HTML、CSS、jQueryプラグイン、ウェブ開発にできるデザインスニペット1200個以上が揃ったサイト。ボタンやホバーリンク、テキストアニメーションなど細かくカテゴリ分けされているので、必要なパーツごとのコー
Photoshop文字加工を極める！テキストエフェクト用チュートリアル186個まとめ【保存版】
この記事では、Photoshopで思い通りの文字の加工ができるテキストエフェクト用チュートリアルをまとめています。 グラデーションや影の加え方、文字をアーチ状にするといった需要の高いPSテクニックはもちろん、立体感のある3Dデザインやネオン、グリッチエフェクトいった旬のグラフィックまで、幅広いテキストエフェクトが揃います。 チュートリアルを手順通り進めることで、Photoshopの実践的なツールの使い方を基本からマスターできます。デザインアイデアに困ったときの参考にもおすすめです。 先日、過去8年分のIllustratorテキストエフェクト用チュートリアルもまとめました。「フォトショよりイラレ。」というひとはこちらの記事もどうぞ。 Illustrator文字の使い方をマスター！テキストエフェクト用チュートリアル116個【総まとめ】 数クリックで魅力的なテキストエフェクトが完成！無料PSDエ
コード共有サイトCodepenで2019年に話題となったHTMLスニペット・ベスト100
HTMLなどのコードをブラウザ上で確認ができ、公開や共有もできるCodepen。その中でも、2019年のあいだに特に人気の高かったコードを、ランキング形式でまとめた The Most Hearted of 2019 が発表されていたので、今回はその中でも特に印象的だった、クリエイティブな作品をいくつかピックアップしてご紹介します。 やはり話題性の高い、最先端テクニックを駆使した投稿が中心にまとめられています。HTML/CSSやJSなどのコードの確認や編集を行うことができるので、今後のデザイン制作に活用してみてはいかがでしょう。 詳細は以下から。 コード共有サイト Codepen で2019年に話題となったHTMLスニペット・ベスト100 99位 SVG Hamburger Menu Icon Animation Collection ハンバーガーメニューのさまざまなSVGアニメーションエフ
まるでプロ！動画編集が捗る無料エフェクト素材350個まとめ【商用フリー】
高機能なカメラがスマートフォンで当たり前になった今、動画撮影の専用機材がなくても、だれでも気軽に美しい映像を撮影できる時代となりました。撮影した動画をより魅力的に見せるには、編集や加工といった作業が必要ですが、ゼロから作ると膨大な時間がかかることも。 After Effects や Premiere Pro、Final Cut Pro X などで利用でき、プロ級の本格的なエフェクトを手軽に実現する無料素材350種類が公開されていたので、今回はご紹介します。商用プロジェクトにも対応です。 まるでプロ！動画編集が捗る無料エフェクト素材まとめ 落書きしたようなハンドペイント21種類や、動画のアクセントになるモーショングラフィック集、映画のような壮大な雰囲気を演出するサウンドエフェクトなど、どれも実用的ですぐに使える素材が揃っています。素材を活用することで、動画のクオリティをアップさせるだけでなく
デザイン・Web制作の作業効率UP！便利チートシート17個まとめ
チートシートとは、覚えておきたいことをまとめた「カンニングペーパー、カンペ」のようなものです。この記事では、デザインやWeb制作の作業効率が上がるチートシートをまとめてご紹介します。 デザインの現場に欠かせないPhotoshopやIllustratorといったAdobe製アプリはもちろん、HTMLの基本やCSS FlexboxやGridといった覚えておくのが大変なものから、配色やタイポグラフィーの基本など、「あれ、どうやるんだっけ？」そんなときに役立つチートシートを、日本語版中心にまとめています。 デザインやWeb制作の作業効率が上がる便利チートシートまとめ Photoshopのショートカットキー早見表 Adobe謹製のフォトショップ用チートシート。数あるショートカットの中から、デザイナーによく使われているものをピックアップして一覧表にしているそう。PDFで保存し、印刷することもできます。
Illustratorをしっかり学ぶ！すごいチュートリアル、使い方50個まとめ 2019年8月度
この記事では、Illustratorの使い方を実践から学ぶ最新チュートリアル、つくり方をまとめてご紹介しています。レトロスタイルや鮮やかなグラデーションなどトレンドを意識したものから、デザインの現場で取り入れたい新機能や便利テクニックまで幅広く揃います。 前回のまとめからおよそ3ヶ月ぶりとなる今回は、基本的なツールの使い方をマスターできる、初心者のひとにもオススメしたいチュートリアルが多く、どれも実用的なものばかり。これを機会にデザインの幅を広げてみてはいかがでしょう。 【総まとめ】2017年すごいIllustratorチュートリアル、作り方厳選70個 Illustratorをしっかり学ぶ！すごいチュートリアル、つくり方50個まとめ レトロなストライプ柄のテキストエフェクトのつくり方 ビンテージな配色が目を引く、70年代風のレトロデザインが素敵な動画チュートリアル。 かわいいユニコーンのキ
これで分かった！CSS GridとFlexboxの使い方を習得できるチートシート、ゲームまとめ
この記事では、CSS FlexboxとGridをつかってお好みのレイアウトを作成するコツやポイントをまとめた使い方ガイドやチートシート、ゲームなどをまとめて紹介しています。 ゲーム感覚で新しいCSSプロパティを学習することができたり、記述方法をど忘れしてしまったときなどにも便利で、お好みのレイアウトをオンラインで作成できるツールもあります。覚えようと思ってなかなか手がつかなかったひとも、これならすぐにはじめることができますよ。 CSS Gridの使い方ガイド、チートシート、ゲームまとめ Grid Garden CSS Gridレイアウトプロパティを使うことで、人参に水を与えながら自分の農園を育てていく、ゲーム感覚でGridプロパティを学ぶことができます。ゲームの各レベルでは、ゲーム達成に利用できる他のプロパティについてもサンプル例と一緒に解説されています。 Bonus – CSS Dine
カラフルで美しいロゴデザインの効果的なつくり方まとめ
ブランドのリニューアル、変更を検討しているひとは、色鮮やかなカラフルロゴを検討してみませんか。カラフルなロゴは、ブランドの注目を集めることができ、認識しやすくしてくれます。 この記事では、カラフルな配色を使ったブランドロゴの作成ポイントをご紹介します。同時に、参考にしたいカラフルなロゴデザインのサンプル例も一緒にまとめています。 カラフルなデザインを選ぶ理由とは？ カラフルなロゴは、ブランドが伝えたいメッセージをうまく伝える手助けとなります。これは、すべての色が異なるメッセージや意味をオーディエンスに伝えることからきています。 たとえばオレンジ色のロゴは、金色と似ているにもかかわらず、異なるメッセージを伝えます。ブランドロゴに配色を利用する場合、ユーザーとのコミュニケーションで威力を発揮し、ユーザーにとってより魅力的みせることに役立ちます。 各色のもつ意味合いについて 赤系ロゴ: 若々しさ
Adobeユーザー無料＆商用可！あらゆるジャンルや雰囲気ごとにまとめたフォントパック厳選43個 - PhotoshopVIP
デザインに合ったフォントを探すのにお困りですか。Adobeが今回、40を超えるジャンルや雰囲気、テーマごとに数百個を超える書体をセレクトしたフォントパックを公開したので、今回はご紹介します。 ブランドイメージづくりから、映画ポスター用や政治メッセージの強いものまで、「あらゆる機会」で利用することを目的に、15,000を超えるAdobe Fontコレクションから、各界の著名なデザイナーや団体が、厳選したフォントが揃います。日本語フォントの選定には、モリサワフォントが参加しています。 2018年10月中旬から、毎日ひとつずつ更新されたフォントパックの数は、43個まで増えています。Adobe Creative Cloud サブスクリプションに付属しているので、Adobeユーザーは無料でダウンロードできます。また、ライセンスは付与済みで、すべてのフォントを商用にも個人用にも利用可能です。 Adob
Photoshopで手描きイラストの背景を透明にする方法（線画抽出テクニック）
紙とペンとつかって手描きされたイラストを、デジタル加工しやすくするために背景を透明にする方法をご紹介します。Photoshopの「線画抽出」という作業で、「チャンネル」機能を駆使することで、デジタル塗りで使いやすい線画に変換します。 スキャナやスマホのカメラから取り込んだ手描きイラストを、Photoshopで自由に加工することができる、応用の効く小技テクニックとなっています。 手描きのイラストの背景を透明にしよう。 今回は、こちらの有名なマンガをつかって、実際に背景を透明にしてみましょう。まずは、不要な色を抽出しないように、イラストを完全にモノクロ化しておきましょう。メインメニューより「イメージ」>「モード」>「グレースケール」を選択します。 © タイトル：ブラックジャックによろしく 著作者名: 佐藤秀峰 URL: http://mangaonweb.com/ Ctrl/Command+A
【簡単】2023年Photoshop切り抜きおすすめテクニック15選 完全ガイド
コンテンツ目次 「被写体の選択」機能 「選択とマスク」機能 「選択とマスク」（複雑な背景バージョン） オブジェクト選択ツール レイヤースタイル「ブレンド条件」 消しゴムツール 自動選択ツール クイック選択ツール 多角形選択ツール ペンツール チャネル設定 色域指定 レイヤーマスク クリッピングマスク 境界線を調整 さいごに、 1. 「被写体の選択」機能 もっとも簡単な、最新の切り抜きテクニック。 ボタンをクリックして、数秒待つだけで完成という、嘘のようなホントのはなし。 試しに、こちらの写真の女性を選択してみましょう。 元の画像をコピー（Command/Ctrl+J）したら、プロパティパネルの「被写体を選択」をクリック。 たったこれだけで、女性モデルのみを選択することができました。 選択範囲をレイヤーマスクとして適用したら、完成です。 Adobe Stockで「背景の削除」も一発完了 実は
Photoshopで写真内の人や物を消す6個の超簡単テクニック 完全まとめ
最終更新日: 2022年10月3日 Photoshopで画像から人や物などのオブジェクトを除去する方法は、デザイン制作において重要なテクニックです。しかし、用途に応じてツールを使い分け、除去レタッチ作業を行っているというひとは、どれだけいるでしょう。 今回は、Photoshopの各種ツールを駆使した除去、消去テクニックと、いつその技を使うのがベストなのか、各サンプルと一緒にまとめてご紹介します。これらの方法を実践することで、写真に写り込んでしまった不要なモノを、2〜3分の短時間で、スピーディーに除去することができるので、フォトショップ初心者のひとにもオススメです。
デザイナーが押さえておきたい、2018年のウェブデザイントレンド6個まとめ【完全ガイド】
2018年になってここまで、ウェブデザインにとって驚くべき年を迎えています。これまで何年もかけて進化してきたデザインが、デザインシステムやタクタイルデザインのような新しいトレンド、また楽しく元気なレトロスタイルの復活などにつながっています。これまで以上に、ウェブデザインの現状と今後の流れを考えることが重要になってきます。 この記事では、2018年にもっとも影響を及ぼしている、6つの最新ウェブデザインのトレンドをまとめてご紹介します。 01. コンポーネントを元にした「デザインシステム」 まだデザインシステム（英: Design System）を導入していないなら、きっと今後数年以内に利用することになるでしょう。最新版となる 2017-18 Enterprise UX Industry Report によると、デザインシステムを利用していない企業の67%が、現在作成中と答えています。 デザイ
【保存版】デザインを学ぶすべての人に贈る、配色アイデア見本101選
配色は、デザインにおける重要な要素のひとつです。この記事では、デザインプロジェクトの参考にしたい、最新の色の組み組み合わせ101種類をご紹介します。 配色は、どんなデザインでも見る人の認識を形成しながら、雰囲気やトーンを設定します。単色や明るい、涼しい、暖かい、または補色であれ、すべての色合いがデザインの役割を果たします。 デザインに適した色を見つける作業は難しいことです。そこで、配色の参考にしたい101種類の色の組み合わせをまとめています。各カラーパレットは、Shutterstockのイメージ画像にインスパイアされており、HEXコードも一緒に記載しているので、ウェブデザインやソーシャルメディア広告、Eメールデザインなど幅広く利用できます。 コンテンツ目次 1. 単色系カラーパレット 2. 寒色系カラーパレット 3. 鮮やかなカラーパレット 4. 暖色系カラーパレット 5. 補色系カラーパ
Bootstrap 対応！2017年最新の無料HTMLテンプレート上半期まとめ
デザイン性だけでなく使い心地にもこだわった、ウェブデザイン制作をグッと楽にする無料HTMLテンプレート素材をまとめました。 人気のHTMLフレームワーク Bootstrap を利用して作成されており、カスタマイズしやすく拡張性の高いテンプレートが中心に揃います。また、2017年のウェブデザイントレンドをうまく反映した素材も多く、サイト開発のデザインやレイアウトの参考にしてみても良いでしょう。 レスポンシブ対応で無料！ウェブ制作を高速化できるHTMLテンプレート24選 2017年1月度 あまり知られていないBootstrapスタイルテクニック、小技16個まとめ Paper Kit 2 控えめな配色と美しいタイポグラフィーが特長のBootstrap 4対応で、収録されているコンポーネントはどれもレスポンシブ対応で、あらゆる画面スクリーンサイズでも読みやすいうれしい設定も。 デモページ ダウンロ
シンプルなウェブデザインを作成する、知っておきたい7つの基本ルール
KISS（略語: Keep it simple, stupidのコンセプトは、US海軍が取り入れた1960年ごろにはじまっています。KISSの原則は、ほとんどのシステムが複雑ではなく、単純であればもっとも効果的であることです。デザインプロジェクトでも同じことが言えます。 多くのグラフィックデザイナーは、早い段階でKISSの原則について学びますが、では実際にどのように活用すれば良いのでしょう。作成をはじめると見た目よりもう少し複雑であることが分かると思います。 今回は、シンプルなウェブデザインを作成する7つのルールをご紹介します。これらのルールを取り入れることで、ごちゃごちゃ感を取り除き、美しくシンプルなデザインに役立てることができるでしょう。 詳細は以下から。 1ページに１つの目標を設定しよう。 シンプルなデザインは、プロジェクトの目標やウェブサイトにおける各ページのはっきりとした目標から
ナビメニュー100連発！CSSで表現できるコピペ可能なHTMLスニペットまとめ
ウェブサイトにおいてユーザーが特に操作する機会の多い部分のひとつが、ナビゲーションメニューでしょう。モバイル端末でのアクセスが増えているいま、より使いやすいスタイルが求められるようになっています。 今回は HTML と CSS、わずかな JavaScript で実装できるさまざまなナビゲーションメニュー用コードスニペットをまとめてご紹介します。アコーディオン型やサークル型、ドロップダウンやフルスクリーン、水平型、モバイル用、Off-Canvasメニューなどをスタイル別に100個まとめています。あらゆるWebデザインプロジェクトで使えるスニペットを、きっと見つけることができるでしょう。 ハンバーガーメニューはもう古い！代わりに使えるモバイル用ナビメニュー5つまとめ コンテンツ目次 1. アコーディオンメニュー 2. サークル型ナビメニュー 3. ドロップダウンメニュー 4. フルスクリーンメ
流行なんて関係ない！いつでも使える黄金ウェブレイアウトUIパターン12個まとめ
海外サイトUXPin Studioで公開された「Web Layout Best Practices: 12 Timeless UI Patterns Analyzed」の著者 Jerry Cao より許可をもらい、翻訳転載しています。 ウェブサイトを訪れるユーザーの多くは、コンテンツを楽しみにしており、デザイン目的で訪れているわけではありません。 この記事では、いつの時代にもマッチする、12種類の黄金ウェブレイアウトパターンを問題点や解決法、具体的な使い方のポイントと一緒に見ていきましょう。 コンテンツ目次 01. カード型レイアウト 02. グリッドレイアウト 03. マガジンレイアウト 04. 枠なしレイアウト 05. スプリット・スクリーンレイアウト 06. 単一ページレイアウト 07. F型パターンレイアウト 08. Z型パターンレイアウト 09. 水平方向の左右対称パターンレイア
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
