本当は教えたくないWebデザイン参考ギャラリーサイト37選
ウェブサイト制作には、常に新しいアイデアやインスピレーションが必要ですが、決まらずに悩んでしまうことも。 そんな状況を打開するには、たくさんの優れたデザインの実例を見ることで、次のアイデアを生み出してみましょう。 ここでは、最新ウェブデザインをいち早くチェックできるオススメWebギャラリーサイトを厳選してご紹介。 インスピレーションとしてはもちろん、クライアントの打ち合わせやイメージの共有にも活用できます。 積極的にインプットを増やし、デザインの引き出しを増やしてみましょう。 このリストは2年ぶりにまとめ直したアップグレード版となります。 コンテンツ目次 【2024追加分】最新Webギャラリーサイト landing.love Design Spells Godly BentoGrids 404s Footer Navbar Gallery 国内Webギャラリーサイト SANKOU! URA
【フォトショップ】白黒写真の「カラー化」と背景をぼかす「深度ぼかし」機能がパワーアップ
2021年6月に最新版へとアップデートされたPhotoshop（フォトショップ）バージョン22.4.2。 Adobe Sensei のAIテクノロジーを駆使し、わずか数クリックで難しいワークフローを大幅削減できるニューラルフィルター機能がより使いやすくなっています。 今回は一新された「白黒写真のカラー化」、そしてより強力になった「写真の深度ぼかし」の使い方を詳しくみていきましょう。作業時間はほんの数秒です。 ニューラルフィルター「カラー化」 2020年に新しく追加されたニューラルフィルター機能は、Adobe のAI技術を活用することで肌をなめらかにしたり、人物の表情を変えたり、写真を絵画スタイルにするなど、面倒な編集作業も数クリックで完了できるのが特長。 Photoshopが進化！新しいCC 2021の便利な新機能まとめ（空を置き換え, ニューラルフィルター） 以前から「カラー化」機能はあ
超便利！確認しておきたい最新CSSツール、リソースガイド厳選65個 2020年度
海外サイト Speckyboy.com で公開された Our 50 Favorite CSS Libraries, Frameworks and Tools from 2019 より許可をもらい、翻訳転載し、さらにオススメCSSツール15個を追加しています。 2020年がスタートし、ここ数年で急速な進歩を続けているCSSは、さまざまなオープンソースのツールがリリースされています。 CSSライブラリやフレームワーク、オンラインツールを利用することで、サイト制作の時間を節約、短縮できるだけでなく、新しいテクニックやプロパティなどに関しては、学習用ガイドラインも多数公開されています。 今回は、2020年に注目したい最新CSSツール、リソースガイド65個をまとめてご紹介します。これからCSSを本格的に学ぶひとも、普段からバリバリでCSSを使いこなしているひとも、一度は確認しておきたい内容となってい
Webデザイン制作が変わる！便利な最新オンラインツール45個まとめ
この記事では、Webデザインやグラフィックデザインの制作スピードが爆速になる、便利な最新オンラインツールをまとめています。 うまくツールやサービスを利用することで、時間や労力の必要な作業もラクラクこなし、よりプロジェクトを円滑にすすめることができるでしょう。気に入ったツールを制作ワークフローに取り入れ、さらなる制作スピードアップを目指しましょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. イラスト系ライブラリ 2. Web制作お役立ちツール 3. モックアップツール 4. デザインからコードへの変換ツール 5. プロトタイプツール 6. アイコン素材パック 7. デザインコレクション 8. 面白ツール Webデザイン制作が変わる！便利な最新オンラインツールまとめ イラスト系ライブラリ Fresh Folk スタイリッシュなイラストを作成で
コーディング作業が爆速に！ すぐ使える便利なHTML5スニペット15個まとめ
HTMLはとても簡単に作成できますが、Webページの制作となると、フォームの作成など、何度も繰り返す必要のある作業もあります。このユーザーガイドでは、コーディング作業ですぐに使えるフロントエンド向けHTMLスニペット15個をまとめてご紹介します。 HTML5基本テンプレート 新しいWebプロジェクトを開始するときは、基本となるテンプレートが必要です。HTML5の基礎として役立つ、無駄のないスッキリとしたテンプレートです。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>無名のドキュメント</title> <meta name="description" content="メタディスクリプションを記述します。"> <link rel="stylesheet" type="text/css" href="theme.css
フォトショップ作業が爆速に！覚えておきたい時短テクニック25個まとめ【2020年版】
この記事では、覚えておくとフォトショップでの作業効率がアップする便利な時短テクニック25個をまとめて紹介しています。 新しくPhotoshop CCに追加された便利なテクニックから、「あったら便利。」を実現できるショートカット、そしてバナナ隠しコマンドまで、時間短縮につながるものが揃っています。繰り返し作業がラクになるのはもちろん、何度もクリックして表現する面倒な作業にも効果的です。 これらのテクニックを活用して、快適なフォトショップライフを過ごしましょう。 小技テクニックの目次 1. バードアイビュー 2. 選択範囲をペイントできる「クイック選択モード」 3. ツールを一時的に切り替える 4. オーバースクロール機能 5. 調整レイヤー＋描画モードの合わせ技 6. レイヤーやブラシの不透明度をホットキーで変更 7. 選択範囲の移動 8. ラバーバンド・ペンツール 9. ブラシツールの「滑
まるで魔法、画像の切り抜きを1クリックで！Photoshop拡張プラグインRemove.bg使い方ガイド
Remove BGは、画像をアップロードしてほんの数秒待つだけで、人物を切り抜いてくれる人気のウェブサービスで、当サイトでも以前紹介しています。 AIで完全自動！複雑な人物画像の切り抜きを5秒で行う無料オンラインサービス remove.bg そんな便利サービスがさらなら進化を遂げ、Photoshop用拡張プラグインを公開したので、今回はRemove BGプラグインのインストール方法や詳しい使い方をまとめてご紹介します。 このプラグインを使えば、どんな画像の複雑な被写体の切り抜きもボタンクリックひとつで行うことができます。 Remove BG フォトショップ拡張プラグインとは？ Remove BG Photoshop拡張プラグインは、人物などの被写体の切り抜きをフォトショップ上でボタンクリックひとつで行うことができる、デザイナーにとって画期的なツールです。 「Remove Backgroun
Web最新テクニックはこれ！コピペで実装できるすごいHTML/CSSスニペット68個まとめ
この記事では、Webサイトやモバイルアプリにあっと驚くエフェクトを、コピー&ペーストで実装できる最新 HTML/CSS スニペットをまとめてご紹介します。 スニペット（英: Snippet）とは、一般的に「切れ端、断片」といった意味で、ウェブサイトなどのプログラミングで簡単に切り貼り、再利用できる部品を指します。 これらのスニペットを利用すれば、他のサイトではあまり見かけない差のつくデザインエフェクトを実現できます。今後のウェブ制作に活用してみてはいかがでしょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. イメージスライダー系 2. テキストエフェクト系 3. テキストエフェクト系スニペット 4. ページレイアウト系 5. ナビゲーションメニュー系 6. ホバーエフェクト系 7. SVGアニメーション系 8. 便利、面白系スニペット 9.
全て無料、本当は教えたくないフリーイラスト素材サイト106個まとめ【商用OK】
この記事では、商用利用かつ無料ダウンロードできるイラスト素材、サイトをまとめてご紹介します。 資料作成やサイト作成などあらゆる場面に重宝するフリー素材を揃えています。 国内と海外サイトに分けてまとめています、用途やデザインに応じて、お好みのイラスト素材を見つけてみてはいかがでしょう。 このリストは随時アップデート予定です、ブックマークしておくと便利です。 コンテンツ目次 1. 国内の無料イラスト素材サイトまとめ（56個） 2. 海外の無料イラスト素材サイトまとめ（50個） 3. 当サイト紹介の人気イラスト素材まとめ 4. イラストを活用したデザイン参考例 5. イラスト素材編集のおすすめツール 国内の無料イラスト素材サイトまとめ ここでは、日本生まれのイラスト素材サイトをまとめています。 無料なのはもちろん、商用利用OKで高品質なイラスト素材が揃います。 商用利用可能な素材を中心に紹介して
Webが進化中！参考にしたい話題の最新ウェブデザイン30個まとめ
デザイン制作のインスピレーションや参考にしたい、2019年に入って注目を集めている、最新ウェブサイトデザイン30個をまとめています。 落ち着いた配色や、美しいセリフ書体、繊細なアニメーション、マイクロインタラクションなどを利用したサイトが増えています。クリエイティブでユニークな最新ウェブデザインを体験してみてはいかがでしょう。 【総まとめ】2018年印象に残った世界のベストWebデザイン厳選51個 2018年人気だったすごいHTMLスニペットベスト100選【Codepen編】 Webが進化中！参考にしたい注目の最新ウェブデザインまとめ Tao Tajima スクロールの強弱に応じて、�3Dモーフィングアニメーション付きでスライダーがヌルヌルと動く、WebGPLの技術を見事に利用したポートフォリオサイト。ページ遷移の滑らかさが、世界でも話題となっています。 Kitamura Makura ま
Photoshopで超時短！便利すぎる無料プラグイン、拡張機能40個まとめ【2019年版】
この記事は、2017年8月22日に公開してから再編集、アップデートを随時行っています。新しいツールを加え、サービスが終了しているツールは削除し、合計40個のPhotoshopプラグイン、拡張機能を紹介しています。 Photoshopはどんなデザインの作成にも使える、多目的で便利なツールです。しかし、特定の作業をしようとすると、時間がかかってしまうことも。そんなときは、フォトショップ拡張プラグインでをつかって、自分好みにカスタマイズしてみましょう。 今回は、デザインの制作ワークフローを改善し、効率をアップするPhotoshopの拡張機能、プラグインをまとめてご紹介します。 Photoshop作業を爆速に！便利すぎる無料ツール、拡張機能、素材あつめました。 オキテ破りの写真加工！フォトショップ無料アクション素材100個まとめ【保存版】 無料Photoshop拡張プラグインまとめ Craft P
2018年大本命！HTML/CSSコピペできる、参考にしたいスニペット78個まとめ - PhotoshopVIP
ウェブ制作で差がつくテクニックをつかった、コピー&ペーストで利用できる HTML/CSS スニペットを、定期的にまとめてご紹介しています。SVGを使ったアッと驚くアニメーションから、普段使いがしやすくなる小技テクニック、現在利用するデザイナーが増えているCSS Gridの可能性を探る実践向けスニペットまで、今後のウェブサイト制作で参考にしたい作品を中心に揃えています。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。これらのスニペットを利用することで、他とは一味違うユニークなウェブサイトを制作してみましょう。 ウェブサイトをもっと面白く！コピペ可能
モバイルUI進化中！革新的なナビゲーションメニュー実例サンプル10個まとめ
モバイル向けナビゲーションデザインには、さまざまな形やスタイルが登場しています。すべてのナビゲーションメニューが同じ構造であれば、ユーザーにとっても直感的で分かりやすいかもしれませんが、現実はそれほど単純ではありません。 独自の問題を抱えたモバイルアプリは、ナビゲーションメニューのデザインによってそれらの問題を解決することもできます。たとえば、７〜8つほどの主要メニュー項目がある場合はおそらくハンバーガーメニューを採用し、３つほどのメニュー項目の場合はタブバー形式を実装するかもしれません。 デザイナーが製品やユーザーのために最適化したナビゲーションメニュー設計では、クリエイティブで画期的なデザインがいくつか見られます。今回は、ナビゲーションメニューを作成するときに参考にしたい、革新的な実例サンプル例をまとめてご紹介します。 ハンバーガーメニューが進化中！2018年に押さえておきたい最新トレ
【簡単】2023年Photoshop切り抜きおすすめテクニック15選 完全ガイド
コンテンツ目次 「被写体の選択」機能 「選択とマスク」機能 「選択とマスク」（複雑な背景バージョン） オブジェクト選択ツール レイヤースタイル「ブレンド条件」 消しゴムツール 自動選択ツール クイック選択ツール 多角形選択ツール ペンツール チャネル設定 色域指定 レイヤーマスク クリッピングマスク 境界線を調整 さいごに、 1. 「被写体の選択」機能 もっとも簡単な、最新の切り抜きテクニック。 ボタンをクリックして、数秒待つだけで完成という、嘘のようなホントのはなし。 試しに、こちらの写真の女性を選択してみましょう。 元の画像をコピー（Command/Ctrl+J）したら、プロパティパネルの「被写体を選択」をクリック。 たったこれだけで、女性モデルのみを選択することができました。 選択範囲をレイヤーマスクとして適用したら、完成です。 Adobe Stockで「背景の削除」も一発完了 実は
【デザイナー必見】差のつくデザイン、すごいフリーフォント65個まとめ 2018年6月度
毎月公開されたデザイン性の高いフリーフォントのみをピックアップし、まとめてご紹介しています。今回は、2018年6月度のフリーフォントまとめです。 プロフォント顔負けのウェイト数が揃う万能フォント、最近よく見かけるようになったレトロ、ビンテージフォント、高級感のある筆記体や手書きブラシフォントなど、実践で活用できる素材で、商用利用に対応したアイテムも多数収録しています。 商用利用の有無について一緒に記載しています、変更されている可能性もあるので、参照ページを確認するようにしましょう。 デザインの現場で役立つ、すごいフリーフォント素材60個まとめ 2018年5月度 【デザイナー必見】差のつくデザイン、すごいフリーフォントまとめ 木漏れ日ゴシック 「デジタル」と「先生が黒板に書いた字」を混ぜて割ったようなイメージ。手書きの流れを残して、カタカナの方が小さめで、優しい雰囲気を演出できます。 ※ 個
CSSの作業をもっと楽に！無料で使える便利なWebツール40選
CSSを使って作業をいているときに活用したい、無料で使えるオンラインツールをまとめてご紹介します。これらのツールは、制作時間を節約、短縮できるだけでなく、CSSのちょっとややこしい問題の解決ツールを想定し作成されています。 CSSをベースとしたアニメーション、レスポンシブに対応したナビメニュー作成ツール、パイチャート作成、CSSの圧縮やユニークなサークル型メニューの作成などさまざまなツールが揃っています。制作に困ったときに読み返してみてはいかがでしょう。 超便利！確認しておきたい最新CSSツール、リソースガイド 2018年度 CSSの作業をもっと楽に！無料で使えるオンライン便利ツール40選 Flexbox Parent Attribute Visualizer CSS Flexbox のプロパティを実際に変更しながら確認できるインタクラティブな方法。 Keyframes.app CSSアニ
人気フォント Futura そっくり?!商用利用もできる無料万能フォント Renner*
1927年に Paul Renner によって設計、デザインされた書体 Futura は、世界的にも特に人気の高いフォントのひとつで、企業ロゴなどにも数多く活用されています。シンプルで美しいスタイルが目を引くフォントで、誕生から90年以上経った今でも絶大な人気を誇ります。 そんな Futura のデザインスタイルにそっくりで、商用利用も可能なフリーフォント Renner* が公開されていたので今回はご紹介します。1書体18ウェイトと汎用性が高い、プロフォント同様に幅広く利用できる素材です。 Renner *フォントとは？ Renner *フォントは、デザインをそのまま真似るのではなく、Futuraのデザインに対する姿勢を保つことを目指し、可能な限りデジタル時代に機能するように設計されています。 フォントの太さの異なる9種類のウェイトが揃い、イタリック体も含めて18フォントが収録されており、
Photoshopに役立つ、無料の万能パターンテクスチャ厳選40枚 2017年4月度
グラフィックデザインからウェブ制作まで、幅広く利用できる Photoshop 用の無料パターンテクスチャ素材をまとめてご紹介します。どれも最近公開されたものばかりで、新しいデザイントレンドも手軽に取り入れることができ、制作時間の短縮にもつながります。 特に今年人気の高いカラフルデザインやモダンレトロの他に、どんなデザインにも役立つ万能アイテムなどが揃います。デザインが何か物足りないと感じるときは、無料ダウンロードできるPhotoshopパターンを活用してみましょう。 デザインの現場ですぐ使える、おしゃれな無料パターン素材38枚まとめ ミニマルスタイルの隠しテク！継ぎ目のない質感系フリーパターン素材まとめ 商用利用にも対応！すごいフォトショップのパターンテクスチャ素材まとめ 2015年7月度 Photoshop パターンの基本的な使い方 パターン素材は、一度インストールしてまえばパターンピッ
超便利！確認しておきたい最新CSSツール、リソースガイド 2018年度
ここ数年起こっているCSSの変化と急速な進歩により、絶え間なくリリースされている膨大な量のオープンソースのツールには驚かされます。 制作時間を節約、短縮できるCSSライブラリやフレームワーク、およびツールは、制作をより手軽に、より簡単にすることを目的に構築されており、理解できていないCSSに関しては学習用ガイドなども数多く提供されています。 このコレクションでは、2018年にリリースされた50種類のお気に入りCSSライブラリ、フレームワーク、リソース、便利ツールをまとめてご紹介します。ユニークなアイデアを形にできるツールがきっと見つかりますよ。 1. CSS レイアウトフレームワーク 2. CSS Flexbox フレームワーク 3. CSS ライブラリ 4. お役立ちCSSユーティリティ 5. オンラインCSSツール/生成ツール 6. CSS画像エフェクトツール 7. CSS学習リソース
2018年のロゴデザインはこれ！確認しておきたい要注目のトレンド15個まとめ - PhotoshopVIP
毎年、ロゴデザインの動向、トレンドをまとめている LogoLounge で、2018年のロゴデザイントレンド15個が発表されていたので、今回はご紹介します。 このレポートは、過去16年間に27万2千個に及ぶロゴを分析し、新しいデザイントレンドを取り入れるきっかけ、手がかりとしてまとめられています。 2018年のロゴデザイントレンド要約 クリーンでモダンな見た目から曲線を活かしたレトロデザインへ変化しています。 表情の豊かなセリフ書体が流行し始めています。 ノスタルジックなデザインは、モダンなコンテンポラリーデザインに引き継がれています。 デジタルスクリーン画面によって、鮮やかで激しい色使いが見られます。 グラデーションカラーは、ひとつの色として認識されるようになっています。 このレポートを発表した Bill Gardner 氏は、以下のように述べています。 このレポートから得られる重要な点
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
