2020年夏のウェブ技術の見直しシリーズ第2段（第1段はこちら）として見直していたWebPの情報ですが、2022年2月にPhotoshopデスクトップ版でWebPがネイティブサポートされました。macOS Big Sur / iOS 14以降のSafariを含む最新のブラウザではWebPがサポートされています。導入しやすくなったいま、もう一度特徴をおさらいしておくと良さそうですね。 ということで、以下はWebPについてのまとめです。2020年7月の情報を2022年2月に更新しました。 なんでもかんでもWebPでいいわけではない 試しにUnsplash でランダムに10枚の写真を選んで、ImageOptimとcwebpコマンドラインツールでjpgとwebpに書き出してみました。結果、WebPのファイルサイズが小さくなる画像もあれば、JPEGのほうが小さくなる画像もありました。たまたまだと思い

[Webデザイナーさんへ] そのデザインがコーディングしにくい理由と、改善ポイント詳説 更新日：2019/12/27 Webデザイナーにとって、自分のデザインがコーディングしやすいのかどうかは意外と気になるもの。 コーダー側は受け取ったデザインを粛々とコーディングするだけなので、あまり「こうしてほしい」と声を上げることはありませんが、デザイナーの観点だけでは気付きにくい問題が埋もれてしまっているかもしれません。 ということで今回は、日々のコーディング作業で気になった覚えのあることをどどんとまとめてみました。 このデザインだとどんな風に困ってしまうのか、そしてどう変えれば改善できるのか、なるべく具体例を挙げて説明していきます。 どのデザインツールでも共通の内容が多いと思いますが、基本的にはPhotoshopでの作業を想定しています。 常識的な内容も多いので、そのレベルは当然できてますという方

Adobe XDが台頭してきていますが、まだまだPhotoshopでデータ作成が必要な場面も多いです。特にレスポンシブデザインの制作では、PC、タブレット、スマホそれぞれのデータを用意する必要がある一...

忙しくて時間が足りない！と常々感じている方もいるのではないでしょうか。特に納期が間近だと、尚更そう感じてしまいますよね。実は、少しの工夫で時間短縮が出来るノウハウは、分野別に多く存在します。 そこで今回は、「仕事ですぐ使える時短術」「Officeソフトの時短術」「ITエンジニアやデザイナーのための時短術」と3つに分類した上で、はてなブックマークが500以上ついている人気記事に絞り、30種類の時間短縮系記事を紹介します。 これらを実践することで、時間に余裕のある生活を目指してみましょう。 仕事にすぐ使える時短術17選1.人生は時間（時間を何倍にも増やす52チップス）（931はてブ） この記事はビジネスマンに必須な時間をつくるためのサービスやソフト、管理方法を紹介しています。Google custom searchでは検索に時間がかからないなど、このサイトはこういう風に役に立つと詳しく書かれて

プロのWebデザイナー、デベロッパーが実際に作業しているファイルを元に、Webデザインのトレンドをツール、カラー、フォント、エフェクト、ワークフローの観点から調査したレポートを紹介します。 安定して人気のあるトレンド、変化しているトレンドをチェックできます。 2016 Web Design Trend Report デザイナーとデベロッパーのコラボツール「Avocode」で利用された1,127,302のPSDとSketchファイルに基づき、2016年のデータとしてまとめたものです。 レポート公開にあたり、私もほんの少しだけ協力しています。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Webデザイナーが使用しているツール デザインのコンポーネント化 ファイルのリビジョン ファイルの容量 Webデザインでもっとも人気が高いフリー

こんちには、フロントエンドエンジニア歴が1年のじぇしーです。 Webクリエイター1年生の皆さん、日々レベルアップできてますか？　Web未経験の皆さん、自分の学んでいる技術が本当に仕事で役に立つのか、不安じゃないですか？ 今日は技術的なネタがないので、今日は0から100まで、完全独学を貫き通した、独学の鬼の私が、中途未経験でLIGのフロントエンドとして採用されるまでに読んだ良書を全18レベル/29冊でご紹介します。 基本的にはフロントエンド向けの情報が多いですが、レベル6までの本を読破するだけでも、デザイナーとしてとりあえずは働き始めることができるような内容となっています。ここで紹介している本を全部読んだら絶対に、Webプログラマー / デザイナーになれます。ソースは自分です。未経験からWeb系の仕事に付きたい方のお役に立てば幸いです。 ※当記事で紹介している書籍は、執筆時点でアプリケーショ

Affinity Designerは、Serif Ltd,が開発するデザイン用ソフトウェアです。Mac/Windowsの両OSに対応しています。ベクターでグラフィックを描画することが可能で、Adobe IllustratorやBohemian Coding Sketchと競合する立ち位置の製品です。 Affinity Designerの最大の特長は、IllustratorやSketchとは違い、Adobe Photoshopのようにピクセル（ラスター）も扱うことが可能なところです。「ペルソナ」と呼ばれるワークスペースを切り替えて、ベクターとピクセルの機能を同一ドキュメント上で使用することができます。 たとえば、Illustratorのようにベクターで描いたグラフィックに対してPhotoshopのようにトーンカーブで色を調整する、といったことが可能です。 本記事執筆時点のバージョンは1.5.

プロジェクトの関係者でないとなかなか目にすることができないワイヤーフレームやユーザーフローもdribbbleだと、たくさんアップロードされています。 最近のWeb制作の参考になりそうなワイヤーフレーム・ユーザーフローを紹介します。

私はWeb制作会社を経営しており、2023年現在で36歳になります。 28歳の時にWebデザイナーに転職してWeb業界でのキャリアをスタートさせ、32歳で独立しました。 この記事では、私が28歳の時に未経験から独学でWebデザイナーに転職した方法を紹介しています。 効率的な勉強方法や習得すべきスキル、転職活動のコツなど、Webデザイナーを目指している人におすすめの内容になっています。 また、今はWebデザイナーを採用する立場になっているので、「こんな人を採用したい」という視点も加わっています。 28歳（当時）の未経験がWebデザイナーに転職 Webデザイナーになるまでは、Webデザインどころか、デザインの仕事やプログラミング、Web関係の仕事すらやったことがありませんでした。 最初からデザインのセンスがあったわけでもなく、今見るとWebデザインの勉強を始めた頃作ったサイトは酷いものでした…

Photoshopは写真の補正をしたり、グラフィックを作ったりとあらゆる作業に活用できる非常に万能なソフトです。PhotoshopはWebデザインにおいても欠かせないツールですが、意外にも使ったことがないという方、試してみたけれど使い方が分からない方も多くいらっしゃいます。 今回は、WebデザインでPhotoshopを使いはじめようとしている方に読んでいただきたい記事をまとめてご紹介します。作業の手順から効率化までしっかりと理解することができますので、参考にしてみてください。 PhotoshopでのWebデザイン作業で読んでおきたい記事まとめ 1.PhotoshopでWebサイトのデザインをしよう｜Webクリエイターボックス http://www.webcreatorbox.com/tech/photoshop-web-design/ Web関連の情報を幅広く届けている「Webクリエイター

Webデザイナーとしてのキャリアを歩み始め1年目。基本的なスキルを学び、業務をひと通りこなせるようになったものの、先輩デザイナーと比べると、差を感じてしまうという方もいるのではないでしょうか？ Webデザイナーはクリエイター系の職種であるため、「センス」が重要視されるシーンが多いです。しかし、“学び”によってスキルアップできるのもまた事実。むしろ、テクノロジーの発展が著しい業界ということから、プロとして仕事を続けるのであれば学び続けなければならないのは宿命かもしれません。 そこで、今回は「Photoshopを使ったデザイン」や「HTMLなどの言語を使ったコーディング」、「Webデザイナーとしてインプットしておきたい情報」に関する30記事をご紹介します。 Photoshopなど、デザインに関する記事10選1.良いデザインって？技術を学ぶ前に知っておきたいデザイン・レイアウトの基本的なこと こ

作成：2012/10/29 更新：2016/10/22 Tool > 低スペックPCやウィンドウ幅の狭いノートを使っている場合、ソフト立ち上げを躊躇してしまう時がありませんか？そんな人に「シンプル、軽い、簡単」のウェブ上で使えるツールをご紹介。ブラウザ内で開けるので無駄なスペースを取られません。 ※こちらの記事は2012年に書いたもので、情報が古くなっております。比較的最近のツール系のまとめは、Web制作に役立つトレンドのツール一覧と以下の２つご覧ください。（※ 2015/06/25 2015/06/28追記） Node.jsとgulpをインストールして使うまでの入門記事 これからGit を始めてみようという人のための使い方と入門フロー 特にウェブ屋さんやブロガーさん達が使っているのをピックアップ。 もちろん僕も頻繁にガシガシ使ってるので「ツール用ブックマーク」としてこのページを作りました

制作の効率が劇的にアップする『Avocode』の正式版が、1/29にリリースされました！ Avocodeは簡単に言うと、PSDのプレビューや書き出しをPhotoshop無しで行うもので、書き出しは画像だけでなく、SVGやCSSにも対応しています。画像のスライスやスタイルシートのコーディング作業がググッと楽になるWin/Mac/Linux対応のアプリです。 正式版で、特に大きく変わったのがデザイナー用簡単GitHub。これは無料で単体利用できる機能で、PSDファイルの共有やリビジョン管理が非常に簡単にできます。 ベータ版の時から、そして正式版がリリースされてからみっちりと試したので、Avocodeの使い方や登録方法を紹介します。 Avocode Avocodeには無料と有料のプランがあり、有料プランの優待コードがコリスのビジター限定でもれなく使用できます。無料プランだけを使ってもよし、有料プ

先月は「Web制作時に備えておくと便利なチートシートのまとめ」でデベロッパ向けのチートシートを紹介しました、今回はデザイナー向けのチートシートをまとめました。 Photoshopの各バージョンに対応したショートカット、ブラシやペンツールの使い方、初期設定をはじめ、デザインの要素と原則、カラーセオリー、タイポグラフィ、グリッドシステム、レスポンシブなど、デザインの現場で役立つものばかりです。 Adobe Photoshop Keyboard Shortcuts Photoshop 5-7, CS1-4, CCまで、Win/Mac用のキーボードショートカットがそれぞれPDFでダウンロードできます。 また、ショートカットがない便利な操作にショートカットを割り当てたショートカットファイルもダウンロードできます（チートシートでは「c」がついています）。

元々DTPやってました 自分は大卒でとある広告メディア系の会社に入ったんですが、ずっとDTP（エディトリアルデザイナー）の仕事をしており、正式にWebデザイナーに転向したのは2012年頃の話です。 「このまま紙だけやっててもそのうち食えなくなっちゃうよなあ…」と思い、仕事のかたわらHTML/CSSをはじめとしたWebの勉強を始めました。一応HTMLかじったことはあるものの、知識は大学生の頃で完全にストップしており、floatって何？レベル。（テーブルレイアウト世代） 一念発起したはいいものの、いざ勉強をしようとすると色々と問題が生じるわけですね。 Photoshopでデザインなんてやったことない、Illustrator使いたい 呪文みたいなコードを延々と打つ作業がだるい うまく動かなくて一つのコード間違いで3時間潰れたりするのが辛い 本屋行けば技術書、入門書はいくらでもあるけど、逆に何選べ

2014年6月27日 Illustrator, Photoshop, 便利ツール PhotoshopやIllustratorなど、Adobeの製品はクリエイターの必需品のひとつとなっています。しかしその値段からなかなか手が出せない…という方も多いのではないでしょうか？今回はAdobe製品の代用として使える無料アプリをいくつか紹介します。金欠の学生さんや、様々な理由から脱Adobeを考えている方の参考になれば幸いです！ ↑私が10年以上利用している会計ソフト！ Photoshopの代わりに GIMP 長年Photoshopの代用として愛され続けているGIMP。Photoshopの拡張子であるpsdファイルが開けることはもちろん、Photoshop用のブラシなども利用可能。画像の編集・加工ツールとしてPhotoshopとほぼ同様の機能を備えています。日本語の公式チュートリアルも充実！私もお金の

3media.biz 2023 著作権. 不許複製 プライバシーポリシー

The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。