こんにちは！「Tekito style」を運営しているやすのり（@98nasi_nori）です。普段は都内でWebディレクター/マーケターなどをしています。

コーポレートサイトやLPなどのWebデザインは外部への制作依頼はしやすいですが、サービスのUI/UXのデザインとなると少し難しいところがありますよね。

サービスやユーザー、事業ドメインなどに対するより深い理解が不可欠で、サービス全体のユーザビリティを考慮したり、ユースケースに応じて細かなUIパターンをつくっていく必要もあります。

先日初めて外部のデザイナーさんにUI制作をしてもらいましたので、その時に整理した外注・依頼時のフローや考えるべきポイント、注意点などをざっと備忘録として残しておきます。

実際にやってみて色々と失敗や反省点などが多々あったので、それについても振り返っていきます。初めてUIデザインを外注したいと思っているディレクターやPMな人に、少しでも参考になれば幸いです。

UIデザイン制作の外注・依頼の流れ

UIデザインの制作を外注・依頼する際に、実施したおおよそのステップはおおよそ下記です。

ざっとこんな流れですね。細かくやることを分解すると、考えないといけないことは割とあります。

タイムラインとしては、仕様の企画後リクルーティングを開始し1〜2週間ほどで依頼するデザイナーさんを確定し、その2週間後に初回オリエンテーションと作業を開始した感じです。その間に仕様やワイヤー、テキストなどは随時ブラッシュアップできる部分は調整していきました。

UI外注時に事前に準備しておくと良いこと・必要な段取り

おおよその流れが分かったところで、UIデザインを外注する上で事前に準備しておくべきことをメモしておきます。

1. 仕様企画＋ワイヤーフレームの精査

要件定義と、仕様およびワイヤーフレームは事前にしっかり固めておきましょう。特に必要となるUIパターンは、可能な限りすべて洗い出しておくことが大切です。

例えば、ユーザーのステータス（ログインやその他フラグの有無など）によって、デザインパターンはどれくらい変わるか？など。

仕様・パターンの洗い出しが不十分だと、追加でデザインを依頼する必要が生じます。その分スケジュール全体がズレ込みますし、開発上の懸念が新たに生じる可能性があります（そのケースの仕様は想定外で、実装が難しいなど）。当たり前ではあるのですが、このあたりを事前に精査し切るのはなかなか難しいところです……。

デザインの段階でパターン出しも具体的に検討しようと思っていると、デザイン時に結構たいへんなことになります。

社内のデザイナーさんであればサービスや事業ドメイン、ユーザーへの理解も豊富だったりするので、ワイヤーやプロトタイプ段階で抜け漏れていたパターンなどにも対処できたりします。しかし社外のデザイナーさんで初めて依頼する方だと、そうした理解が不十分でどうしてもUIの抜け漏れが生じる可能性が高くなります（もちろんその方の対応力や、どこまですり合わせできたかにもよりますが）。

ですのでUIを外注する場合は、ある程度のUIパターンを社内でしっかり決めておくのが良いですよ。

可能であればプロトタイプをつくり、ユースケースごとに最適な利用フローになっているか、機能やUIの抜け漏れがないかを確認すると良いです。

2. 依頼内容とデザイナーの要件定義

仕様をある程度精査できたら、依頼内容およびリクルーティングの要件を整理していきましょう！

おすすめな依頼方法・依頼サイトは？

具体的にデザイン作業の内容が定まってきたら、リクルーティングを順次はじめていきます。知人経由や社内人脈を活用してリファラルで探すのが一番良いですが、もし見つからなければ外部の求人サービスやSNSをフルに活用して探すことも検討してみて下さい。

参考までに下記のサイトなどで探していました。

ランサーズは一度募集した時に、10人以上応募がありましたね。実績がありそうなUIデザイナーさんやUIデザイン会社などからコンタクトもちらほらあったので、意外と良い感じでした！

大体の予算感は？

これはデザインの内容や工数、予算、依頼する個人・企業などにもよってくると思うので参考までにですが、1ページあたり数万円前後で提案いただくことが多かったです。

ちなみに金額については、成果ベース（1ページいくら）で握るか、時間ベース（トータル何時間くらいか、1時間あたりいくらかなど作業工数）で握るかは事前に考えておきましょう。

ある程度やるべきことが明確に決まっている場合は成果ベースでもよいですが、デザイナーさんと一緒に考えつつ調整しながら進めたい場合や不確定要素が多い場合は、工数ベースで依頼するとよいかなと思います。

3. オリエンテーション資料の作成と共有

仕様を詰めたりするのと同様、初回のオリエンテーションはかなり大事だと思っています。

依頼の背景や目的、サービス・事業、ユーザーについての概要、今回解決したいユーザー課題と達成したいゴールなど、ドキュメントでも共有しつつ口頭でもできる限り丁寧に補足しすり合わせていきました。

今回はコロナ禍ということもあり、Zoomにてオンラインで実施しましたよ。

Marginやカラーリング、レイアウト、各種トンマナなどデザイン上のルールがあれば共有し、事前に認識を揃えておくと良いです。開発側の制約などでデザイン上変更できない箇所などもあれば、ここで整理しておきましょう！

また納品の形式や拡張子、画像をどこまで書き出すのか？どのように共有するか？などは、後ほどトラブルにならないように必ず事前にすり合わせておきましょう！

必要なテキスト情報は事前に用意しておく！

デザイン時に必要なテキストコンテンツなども、スプレッドシートなど一覧でまとめておくと良いです。

もしマークアップやフロント構築も同時に依頼する場合は、遷移先のリンクURL、パンくず、メタタグ（サイトタイトルやディスクリプション）などの情報も整理しておきましょう。

4. 契約関連の資料

必要に応じて業務委託契約書や秘密保持契約書なども、忘れずに用意しておきましょう。今回秘密保持契約書については、「Misoca」でつくり全てオンラインでやりとりをしましたよ！

5. コミュニケーションの取り方

コミュニケーションについては、チャットワークでグループを作成し、そこに開発や社内のデザイナーなど関係者含めてやり取りしました。ツールについては、フェイスブックメッセンジャーでもSlackでも、チームで使い慣れたものでOKです！

また事前に作業日時は洗い出しすり合わせた上で、作業開始前にチャットで一言（作業開始します！など）入れてもらい、作業後は簡単に1日の進捗を共有してもらっていました。

デザインの進め方やフィードバックで気をつけること

デザイン制作を進めていくにあたり、その進め方や修正・フィードバックで気をつけておくべきこともざっとまとめておきます。

デザイン提出の順序や進め方は事前に握っておく

デザインの進め方は事前に握っておいた方が良いです。先に30%くらいの完成度でいったん提出してもらって、確認後一緒に叩きながらデザインをブラッシュアップしていくのか、もしくはデザイナーさん側で一度完成形まで仕上げてから提出後修正などをしていくのかなど。

このあたりは依頼側のチームやデザイナーさん自身のスタイルによる部分もあると思います。ですが提出時に「思ってたのと違う！」とならないように、事前にどのようにどのタイミングで確認するか、確認フローや頻度などは考えておいた方が良いです。

また細かいですが、

• デザインパターンは複数作る想定か？
• 修正は何回くらいまでOKか？

なども話しておいた方がいいでしょう。

フィードバックの観点

何となく「これ直して！」だと、何のためにその修正をするのかデザイナーさん側も分かりません。

事業やサービスについて理解があるのは依頼側の方ですので、そうしたことも踏まえて、なぜそのフィードバックをしたのか？なぜその修正をするのか？など理由も明文化し丁寧に伝えると、よりよいデザインに繋がるのかなと思います。

非デザイナーからすると、デザインについて言語化するのはなかなか難しいところですが……、できる限り言語化する努力はしましょう。

またケースごとに言ってることやフィードバックの方向性が異なると混乱しがちです。どの観点でどんなスタンスで、などフィードバックの軸も統一できるといいです。このあたりも、どんなデザインをするのかの方向性が固まっていないと難しいところですが。

フィードバックやコメント方法も整理しておく

フィードバックする項目は、スプレッドシートなどシートでまとめておくと良いです。修正内容が多数発生した場合、どれが対応済みでどれが未対応なのか抜け漏れが発生しないように、また認識のズレが発生しないように、明文化し整理しておきましょう！

フィードバックは五月雨にすると、抜け漏れが発生したり、デザインの統一感がなくなったりすることもあります。できる限り一度整理・精査してから、フィードバックを渡す方がいいです。

UI検討時に抜け漏れ出さないために……

先程も述べましたが、事前の仕様策定が曖昧だとUIデザインをつくっていく中で、

「このパターンも必要だ」
「このケースの場合、どういうUIになるのか」

などパターンが抜け漏れ、デザイン作成のスケジュールも押していくことになります。

可能な限り仕様を策定する段階で、下記の観点は抜けもれないく事前に検討しておくとUI作成がよりスムーズになるかと。ベースの仕様が合った上で、デザイナーさんと叩きつつUIや仕様を必要に応じてブラッシュアップしてくと良いかなと思います。

依頼内容や進め方などはプロジェクトによりますので、あくまで参考として検討すべき項目の抜け漏れチェックにどうぞ。

下記の記事も参考になります。
「UIスタック」でデザインする際の抜け漏れをなくす
強度の高いUIをデザインする

プロトタイプでの検証

UIが完成した時点でそのまま納品とせず、一度完成版のUIでもプロトタイプをつくり、動作やユーザーフローの検証を進める時間を取った方が良いです。開発・プロダクトチームで確認し、擦り合わせておきましょう。

UI制作を外注して進める場合は、スケジュール的に実施が大変かもしれません。しかしプロトタイプを挟んで確認すれば、

• 新規ページと既存ページのつながりを把握できる
• おかしい場所やユーザーが行き止まりになる場所に気づける
• 使いやすさや、使いにくさ分かる
• UIパターンの抜け漏れに気づける
• デザイン、企画、開発の作業者間での認識がずれにくい

などメリットは大きいです。「1,000の会議より、1つのプロトタイプ」（prottのキャッチコピー）です。

もし懸念事項などあれば、納品前に確認して修正することもできます。ぜひワイヤー段階だけではなく、出来上がったUIデザインでのプロトタイプ検証の時間をスケジュールに組み込んでおきましょう。

【まとめ】UI制作を社外で進めるには、事前の準備とすり合わせが必須！

ここまで外部のデザイナーさんにUI制作を依頼する際のフローや考えるべきポイント、注意点などをざっとですが振り返ってみました。

それなりの規模のUI制作を社外の方に依頼して進めるには、しっかり準備して進めることが大切です。目指すサービス体験や改善の方向性など、依頼するデザイナーさんとのすり合わせや目線合わせは丁寧にしていくと良いです。

UI制作の外注は難しい面も多かったですが、今回実施してみて色々と学びがあったので、また改善しつつトライしてみようと思います。もっと良い進め方やコツがあれば、ぜひ教えて下さい……！

こんにちは！「Tekito style」を運営しているやすのり（@98nasi_nori）です。普段は都内でWebディレクター/マーケターなどをしています。

Webデザインを学びたいけど、たくさんスクールがあってどこに行けばいいのか分からない……。

そういう方は多いですよね。僕自身も社会人2年目の時に、仕事をしながらWebデザインスクール（デジハリ）に1年間、週2で通った経験があります。

スクール選びには1〜2ヶ月くらいかけて、どの学校が良いかネットで調べたり説明会に行ったりしていました。

普段の仕事でデザインやデザイナーさんと関わる機会が多く、

「自分もデザインできるようになりたい！」と思ったのがスクールに通ったきっかけです。

現在は仕事でWebデザインもそうですが、UX/UIデザインの企画にも携わったりしています。

本記事ではそうした経験をもとに、おすすめなWebデザインスクール・専門学校、およびオンライン講座を7つ比較しつつご紹介していきます。

今の自分が改めてWebデザインスクールに通うとしたら、この学校を選ぶな、という観点でご紹介できればと思います。

Webデザインを学ぶならスクール・専門学校に通うべき？

結論としては、Webデザインが完全に未経験で、独学の仕方が分からない、ある程度勉強してから就職・転職しないと不安、という方はスクール・専門学校に通うことはおすすめの選択肢です。

何をどういう順番で学び、どうアウトプットを重ねていくのかは未経験の方だとハードルが高いのも事実。

特にWebデザインは自分で勉強してアウトプットをつくっても、その良し悪しが今ひとつ分かりづらかったりします。

バナーとかWebサイトのデザインをつくってみても、微妙な感じがするけど、何が悪いのか言語化できなかったり……。

Webデザインスクールでは講師陣からはもちろん、受講生同士でも客観的にフィードバックし合える環境があるので、成長という観点では独学よりかなり恵まれた環境だと思います。

また未経験からWebデザイナーとして就職・転職するなら、ポートフォリオの作成は必須です。ポートフォリオの出来具合で、その成否が決まることもあります。

Webデザインのスクール・専門学校では、そうしたポートフォリオ作成のサポートもしてくれます。

独学だとつまづいてしまうことも多いですが、そこを上手くサポートしてくれますよ！

Webデザインスクール・専門学校に通うメリット

実際に1年間Webデザインスクールに通ってみて、感じたメリットは下記です。

学習カリキュラムはスクールによって異なりますが、基本的にWebデザインに必要な知識・スキルを体系立てて学べます。何か問題があれば講師やメンターから、フィードバック受けることができるのは大きなメリットですね。

スクールで基礎を一通り学べば、あとは自分で学んで自分でアウトプットするサイクルをつくれるはず。そうなれば未経験の方でも、就職・転職してからも何とかやっていけるでしょう。

Webデザインスクールに通うデメリット・注意点

続いて、Webデザインスクールに通うデメリットや注意点も合わせてお伝えしておきます。

シンプルに授業料がかかるのがネックですね。1ヶ月で10万円〜くらいかかるので。そこにコストを掛けて気合を入れる、逃げ場をなくすという意味ではメリットにもなります。

あと社会人の方だと、平日の夜や土日に授業を受けることもありますので、勉強や宿題とかを入れると割と大変です。キャリアチェンジをするなら、ある程度大変であることを覚悟して挑みましょう。

また専門スクールに通ったからといって、自動的にWebデザイナーになれる訳ではありません。

受け身ではなく積極的にフィードバックをもらいにいったり、予習復習をしたり、アウトプットを重ねてスキルを磨いていく意識が重要です！

せっかくスクールに通うなら、元手以上を回収できるように、講師もサポートも使い倒しましょう！

1年間Webデザインスクールに通っていた時に感じた、メリット・デメリットについては下記に詳細をまとめています。良かったら参考にしてみて下さいね。

関連記事Webデザインスクール・専門学校に通うメリット・デメリットを経験者が比較してみた

2023.09.30

Webデザインスクール・講座の選び方

Webデザインスクールの選び時は、下記の要素を考慮すると良いでしょう。

またスクール・専門学校と、オンライン教材・講座の違いは下記ですね。

スクールではしっかりカリキュラムが組まれていて、メンターや講師が生徒の学習進捗をサポートしてくれるので、完全な初心者の方でも息詰まる心配はあまりないです。

またキャリアについても相談に乗れたりサポートをしてくれるので、Webデザイナーとして就職・転職したい場合はスクールの方が良いです。

一方でオンライン講座は動画や教材などは用意されていますが、カリキュラムと言えるほどコンテンツが整理されておらず、メンターなどのサポートもありません。基本的にWebデザインに関連する好きな動画や教材を選んで、自分のペースで学習する感じです。

コストもスクールと比較し安いので、自分で正しい学習計画を立て、自学自習できる人はオンライン講座でも良いでしょう。

一方で自分で学習計画や教材選定を上手くできる自信がない人は、スクールに通うことで余計な心配をせず、デザインの学習に集中できます。

厳選！中長期で学ぶのにおすすめなWebデザインスクール・専門学校

上記のメリットやデメリットも踏まえて、それでもデザインスクールに通いたい！！という方はぜひ下記の学校をおすすめします。僕がデザインスクールを決める時に、ガチで迷った2校です。

中長期でしっかり学ぶスクールなので時間とコストはかかりますが、講師やカリキュラムの品質、サポート体制含めしっかりしています。本気でデザインを学びたい人はぜひ検討してみて下さい。

1. デジタルハリウッド STUDIO by LIG

Photo by：デジタルハリウッド STUDIO by LIG　公式サイト

コース名	Webデザイナー専攻
受講料	¥450,000 (税抜 / 分割払い可能)
受講期間	6ヶ月
通学形態	オンライン＋オフライン
場所	STUDIO上野 by LIG STUDIO池袋 by LIG STUDIO大宮 by LIG STUDIO北千住 by LIG
公式サイト	Webクリエイタースクール【デジタルハリウッド STUDIO by LIG】

「デジタルハリウッド STUDIO by LIG」は、Web制作やオウンドメディア運営で有名な株式会社LIGが運営するWebデザインスクール。6ヶ月で未経験から、Webデザイナーとして就・転職を目指せるカリキュラムを提供しています。

クリエイティブ教育に強い僕の母校デジハリとタッグを組んでいるので、教材の質は間違いないです。

また価格も半年で45万円（分割払いも可）と、他のスクールと比較しても内容含めコスパ良いですね。

東京の上野、池袋、埼玉の大宮に校舎があり、さらに2021年10月からは北千住校も新規オープンしました！現在は全部で4校舎です。どの校舎もオシャレでカフェみたいなスペースなので、勉強のモチベーションも上がること間違いなしです！

カリキュラム内容

「Webデザイナー専攻」では、下記のスキルを習得できます。

前半でWebデザインの基礎スキルおよび、HTMLやCSSでのコーディングを学び、後半ではポートフォリオ作成含めた実践学習をしていく感じです。またデザイン時に重要なライティングや編集、撮影についてもオリジナル教材で学べます！

授業スタイルは映像教材を使用したオンライン授業と、個別指導を併用した学習スタイルを採用しています。

オンラインだけでなく、教室でも作業した場合は、平日10時〜22時 ・休日10時〜20時で教室を開放していますよ。

LIGに勤めている現役デザイナー・クリエイターから、マンツーマンで直接学べるのは最大のメリットですね。Webデザインの現場感やトレンドを抑えたフィードバックやサポートをしてくれます。

LIGの社員の方とは仕事で繋がりがあるのですが、遊び心のある面白い人やスキル・プロ意識が高い人が多い印象です。

受講期間は6ヶ月なので長すぎず、Webデザイナーとしてスタートラインに立つために、必要十分なスキルに絞って学ぶことができるので効率も良し！

卒業後の就・転職サポートも

Webデザイナーとしてキャリアチェンジするなら、ポートフォリオは命です。そうしたポートフォリオ作成のサポートだけではなく、そこ含めた下記の就職・転職サポートを広くしてくれます。

仕事で実践しないとデザイン力はつかないので、スクールで半年きっちり学んでポートフォリオを創り、転職活動していきましょう。

僕の知り合いもこのスクールに通って、現在はIT系の企業でデザイナーをしつつ、フリーランスとしても活躍していますね。スクールに通いながら、実案件を行う人も中にはいます。

通常のデジハリとの違いは？

授業システムは基本的にデジタルハリウッドスクール（デジハリ）と同じで、デジハリで使えるサービスは全て使える感じです。

プラスで制作課題などをLIG社員が企画してくれたり、現場社員との触れ合いがあるので、Webデザインの現場理解を深めることができお得です。またLIG独自の就職・転職サポートもあります。

僕が通ったのはデジハリの1年のカリキュラムでしたが、個人的には1年は長く、正直費用がしんどかったですね。半年以内で必要なスキルを最短で学んだら、就・転職し現場でスキルを磨いていくことをおすすめします。

僕がもう一度Webデザインスクールに通うとしたら、期間と価格、サポート内容踏まえてこの「デジタルハリウッド STUDIO by LIG」に通いたいです。

デジタルハリウッド STUDIO by LIG 公式サイト

\ 6ヶ月で未経験からWebデザイナーになるなら /

無料見学・説明会に参加する (公式サイト)

2. デジタルハリウッドスクール

Photo by：デジタルハリウッド公式サイト

クリエイティブ系の専門スクールといえば、このデジハリが有名です。僕の母校ですね。

基本的に対面での授業がメインで、その他オンライン教材も併用します。教材やサポートのクオリティは高く、運営スタッフもしっかりしている方が多い印象でした。

いくつかコースがあるのですが、僕は本科UI/UXD専攻コースに通っていました。受講期間は1年間、週末1日＋平日夜1日の週2日、価格も120万（税抜）となかなかヘビーなので、社会人の方はそれなりに覚悟が必要です！

カリキュラム内容

通っていた本科UI/UXD専攻コースでは、下記などについて学びましたよ。

1年かけてかなり広い領域を学ぶ感じです。後半ではUI ・UXデザインのゼミが1〜2ヶ月ほどあったのですが、外部の専門講師が来てくれてかなり勉強になりました！

全てを理解して自分のスキルにするのは難しいので、学ぶ内容を自分で取捨選択する必要があります。色々学べて楽しいのですが、人によっては学ばなくてもよいカリキュラムもあり、無駄な時間やコストがかかってしまう感はありますね。

どんな人におすすめなスクール？

時間を捻出でき、価格も懸念にならず、デザイン＋αでデジタルアートや動画制作など幅広く学びたければおすすめなスクールです。

デジハリには他にも価格を抑えた半年コースやグラフィックデザイナー専攻、3DCGデザイナー専攻など、様々なコースがあるので、自分に合ったものを探してみると良いかなと思います。

ちなみに最初40人ほどいた同期は、最終的に10人前後になりました（汗）。1年間通うのであればそれなりに体力も情熱も必要ですが、本気で学ぶ覚悟があるならとても良いスクールですよ！

\ 幅広くじっくりWebデザインを学ぶなら /

無料体験レッスン付き！短期集中で学べるおすすめWebデザインスクール

続いては、短期集中でWebデザインの基礎を学べるおすすめなWebデザインスクール・専門学校です。半年・1年スクールに通う時間やコストはかけられないけど、短期で集中して学びたい方におすすめな3校をご紹介します。

また下記スクールは無料体験レッスンがあるので、ぜひ気になる方は一度受講してみるとスクールに通うイメージがつくかなと思います。授業が合わなくても、体験は無料なのでリスクも0です。高い費用を払う前に、一度は受けてみると良いですよ！

3. TECH ACADEMY Webデザインコース

Photo by：TechAcademy 公式サイト

コース名	Webデザインコース
受講料	社会人：174,900円（税込）〜 学生：163,900円（税込）〜 分割払い可能
受講期間	1ヶ月 〜 最大4ヶ月
通学形態	オンライン
公式サイト	https://techacademy.jp/webdesign-bootcamp

TechAcademy（テックアカデミー）は、未経験者向けの最短4週間完結するオンラインスクール。そのWeb専門コースです。

短期間で4つのWebサイトのリリースを目指し、最終的にはオリジナルのWebサイトをデザインできるようになる学習プログラムを提供しています。

すべてオンラインなので、どこかに通う必要もなく自宅で学ぶことができます。

カリキュラム内容

具体的には下記のようなカリキュラムで学んでいきます。

カリキュラム内容は受講生からのフィードバックを踏まえ、かなりの頻度で改善されています。

また受講生に1人ずつ現役のプロのパーソナルメンターがつくのが特徴で、週2回マンツーマンでのメンタリングをしてくれ、チャット（毎日15時〜23時）で質問すればすぐに回答が返ってきますよ。初心者でも安心できる学習環境です。

課題のレビューについても回数無制限で受けられるので、ガンガン有効活用するとよいでしょう。

さらに受講生限定で無料転職サポート（直近では都内の企業のみ）や副業案件の紹介も実施しているので、卒業後のキャリアが心配な人も相談できる環境が充実しています。

どんな人におすすめなスクール？

TECH ACADEMYのWebデザインコースは下記のような方におすすめです！

ちなみにデザインの必須ツール「Adobe Creative Cloud コンプリートプラン」が、3ヶ月間無償提供されます。

無料体験・無料説明会を随時実施しているので、気になる方は公式サイト（FAQの欄）をチェックしてみて下さいね。

TechAcademy Webデザインコース公式サイト

\ 個別メンターが安心サポートしてくれる！！ /

TechAcademy Webデザインコース公式サイト

4. SHElikes（シーライクス） Webデザインコース

Photo by：SHElikes（シーライクス）公式サイト

コース名	Webデザインコース
受講料	入会金148,000円 (税別) ＋受け放題プラン：月12,334円（税別）〜 / 月5回プラン：月8,167円 (税別) 〜
受講期間	1ヶ月 〜 最大12ヶ月 （※Webデザインコースは2ヶ月）
通学形態	オンライン＋お洒落な教室（表参道・銀座・名古屋）あり
公式サイト	SHElikes（シーライクス）公式サイト

SHElikes（シーライクス）は、未経験者向けかつ女性専用のWeb系キャリア支援スクール。スキルアップ支援やコミュニティ、コーチングなどを通じて、どう自分らしく生きるかを、ひとりひとりに寄り添いサポートしてくれます。

今回紹介するのは、数ある提供コースの中で一番人気のあるWebデザイン専門のコースとなります。

プランは2つで、全レッスン受け放題になる「受け放題プラン」と、月5回まで受講可能な「月5回プラン」があります。

受け放題プランはデザインのみならず、ライティングやマーケティング、動画制作など、全32コースからオンラインで受け放題なのでかなりお得なサービスです。

「デザインに興味があるけど、他にも色々学んでみたい！」という好奇心旺盛な方にはおすすめですね。

カリキュラム内容

Webデザインコースでは、2ヶ月間で下記のようなカリキュラムを学んでいきます。

Webデザインからコーディングまで、サイト制作の基本的なスキルを学んでいく感じです。上記以外にも、外部講師を招いたイベントや勉強会が随時開催されています。

また学習中の不明点はティーチングアシスタントの方に質問できます。月イチでのコーチングサポートがあるので、モチベーション維持や学習方法の相談などもできますよ。 スキルをしっかり身につけられた方には、お仕事紹介のサポートもあります！

どんな人におすすめなスクール？

SHElikesのWebデザインコースは下記のような方におすすめです！

女性専用のスクールということもあり、独自のコミュニティが活発なので、他の参加者とも刺激を受けながら勉強・スキルアップしていける環境があるのが良いですね。

スクールやレッスン内容の詳細については、無料体験レッスンにて確認してみて下さい。体験レッスンに参加すると、初月の受講料が無料になるので要チェックです！

SHElikes（シーライクス）公式サイト

\ 無料体験レッスン参加で初月無料！ /

SHElikes公式サイトを見る

主婦・ママ向けにおすすめなWebデザインスクール

番外編として、主婦・ママにおすすすめなWebデザインスクールも合わせてご紹介いたします。家事・育児とスクールを両立したいと考えている方は、合わせてチェックしてみて下さいね。

5. FammママWebデザインスクール

Photo by：Fammママwebデザイナースクール 公式サイト

受講料	162,800円(税込) ※無料シッター付き
受講期間	1ヶ月
通学形態	オンライン（LIVE配信を中心）
公式サイト	Fammママwebデザイナースクール

Fammママwebデザイナースクールは、子育てで忙しい主婦・ママ専用の初心者向けWebデザインスクール。
100万人以上の会員子育て家族アプリ「Famm」を運営している、株式会社Timersがサービス提供をしています。

忙しいママでも学びやすいように、オンライン、かつ1ヶ月短期集中で受講できます。

さらに特徴的なのが、無料でシッターを自宅まで手配してもらえること！子育てや家事で大変な中でも、学習に集中できるようにサポートしてくれるのはとてもありがたいですね。

カリキュラム内容

Fammママwebデザイナースクールでは、主に「ページ作成」と「バナー作成」ができるようになります！具体的には下記のスキルを学んでいく感じです。

講座は全5回で、一回あたり3時間ほど。最大8人の少人数で実施されます。

主婦・ママが参加しやすいように、すべて平日の午前中に開講されますよ！

また欠席しても録画動画を視聴できるので、都合がつくか不安な方でも安心です。

卒業後のアフターサポートも充実で安心！

1ヶ月の講座では、短期集中で上記の必要なことに絞って学習していきますが、卒業後も無料で応用的な内容（Adobe Illustrator、 WordPress、jQueryなど）を学んだり、講師質問会などに参加することも可能です。

仕事の案件については、卒業後にFammから紹介してもらうことができます！副業・在宅ワークを始めたい方にも安心ですね。

また2,000名以上の、同じようにデザインを学んだり仕事にしている主婦仲間とのコミュニティに参加できます。

どんな人におすすめなスクール？

Fammママwebデザイナースクールは、下記のような方におすすめです！

ママ・主婦専用のスクールなので、サポートを受けつつ安心して育児と勉強を両立できますよ。

詳細については、電話にて無料説明会が開催されているので、そちらに確認してみて下さいね。

Fammママwebデザイナースクール 公式サイト

\ 7/15まで受講料全額無料！ /

無料の電話説明会に参加してみる (公式サイト)

Webデザインでおすすめなオンライン講座

Webデザインスクールに通うのが時間的にも物理的にも、金銭的にも難しいなら、オンライン講座・教材で学ぶという選択肢もあります。

オンライン講座の場合は、スクールや専門学校とは異なり、講師やメンターのサポートもなく同期もいません。動画や教材を見て、各自で学習スケジュールを立てて、必要な箇所を勉強するイメージですね。

独学でも全く問題無い人や、学ぶべき内容が明確に把握できている人には、効率的でおすすめな選択肢ではあります。

以下ではおすすめなオンライン講座を厳選してご紹介していきます。

6. Udemy

Photo by：Udemy公式サイト

Udemyは世界最大級のオンライン学習プラットフォームで、世界中の学びたい人と教えたい人をオンラインでつなぐサービスです。

Adobeのソフトなどウェブデザインはもちろん、データサイエンス、マーケティング、AIなどについても実践的なレベルで学べます。1講座あたりの価格は数千～数万円程度。ですので、必要な講座のみ受講すればコストも抑えることが可能です。講師に直接掲示板から質問ができるため自学自習もできます。

また専用アプリを使えばスマホから視聴も可能なので、自分のペースで学びたい方にはピッタリです。下記のようなデザイン関連の講座があるので、ぜひチェックしてみてくださいね。

ウェブデザインコース
グラフィックデザインコース（グラフィックデザインとイラストレーションを学ぼう！）
Web開発コース(HTML/CSS/JavaScriptなど)

「未経験からプロのWebデザイナーになる！ 400レッスン以上の完全マスターコース」など初心者・初学者向けの講座もあります。

また時々セールもやっていて、通常￥24,000の人気コースが￥1,320（94%OFF）のときがあります！定期的にチェックしておきましょう！

Udemy公式サイトを見る

7. Schoo（スクー）

Photo by：Schoo公式サイト

デザインをテーマとした授業があり、その中でWebデザイン・制作も一部取り扱っている感じです。

デザインの講義では、下記のようなテーマがあります。

月額980円を課金すると、過去に放送された5,000本以上の授業が見放題となります！倍速再生とかもできますよ。

分かりやすいコンテンツが多いので、初心者の方にかなりおすすめです。実践的な内容の動画も多々あるので、中級レベルの人も覗いてみると学びがあると思います！

Schoo（スクー）公式サイト

【まとめ】自分に合ったWebデザインスクール・講座を選ぼう！

ここまでおすすめなWebデザインスクール・専門学校、およびオンライン講座を7つまとめてご紹介してきました。

Webデザインが完全に未経験で、独学の仕方が分からない、ある程度勉強してから就職・転職しないと不安、という方はスクール・専門学校に通うことはおすすめの選択肢です。

何をどういう順番で学び、どうアウトプットを重ねていくべきか、未経験の方をサポートしてくれます。

ある程度コストはかかりますが、学習時間の捻出や挫折するリスクを考慮し投資することも検討してみて下さいね。独学が得意な人は、オンライン講座を合わせて検討しても良いでしょう。

スクールといってもいろいろな特徴や良し悪しがあるので、自分のニーズに合ったところを選ぶようにしましょう！

【まとめ】おすすめなオンライン講座・教材

（6）Udemy
世界最大級のオンライン学習プラットフォーム。Adobeのソフトの使い方からウェブデザインまで、専門的な内容を動画で学ぶことができる。

（7）Schoo（スクー）
Schoo（スクー）は大人向けの生放送コミュニティサービス。初心者でも分かりやすいデザイン、Webデザイン・制作の動画が多数あり。月額980円でデザイン以外の動画も見放題！

1年間Webデザインスクールに通っていた時に感じた、メリット・デメリットについてはこちらの記事から ↓↓

関連記事Webデザインスクール・専門学校に通うメリット・デメリットを経験者が比較してみた

2023.09.30

あくまで参考ですが、デジハリの授業の様子はこちら ↓↓

関連記事【デジタルハリウッド授業体験記 #1】デジタルデザイン専攻_HTMLの基礎

2020.11.23

関連記事【デジタルハリウッド授業体験記 #3】デジタルデザイン専攻_リーンスタートアップとリーンキャンバス

2020.11.23

こんにちは！都内でマーケター / プロダクトマネージャーをしているやすのり（@98nasi_nori）です。マーケティング施策全般、WebプロダクトのUI/UX改善などをしています。

Adobe（アドビ）ソフトってマジで高い……。なんとか安く利用できる方法はないの？

Adobe CC（Adobe Creative Cloud）は、ライセンス式なので毎年、あるいは数年ごとに毎回購入し直す必要があり、時に「Adobe税」とか言われることも……。

Adobeソフトを毎回購入するのは、値段も高く結構しんどいですよね。

今回はそんなAdobe CCを格安で利用する裏技をお伝えします。社会人でもデジハリの「Adobeマスター講座」を活用して学割利用できる方法で45%OFF、およそ半額で購入できます。Amazonのセール「ブラックフライデー」時よりも安いです。

これでPhotoshopやIllustrator、After Effects、XDも全て問題なく使えます。

特にデメリットや制限もなく、マジでメリットしかないです！社会人の方も学生の方も、通常よりお得にAdobeソフトを使うことができる本当におすすめな方法です。

僕は社会人になってから1年間デジハリに通っていたので、その時この方法を教えてもらいました。Adobeを使う時は毎年この方法で申し込んでいて、知らないとかなり損するのでみなさんも絶対に知っておいてほしいところ！

実体験や評判を踏まえレビューしていくので、Adobe税に悩まされている方はぜひチェックしてみて下さい。

社会人も学割？！Adobe CCをデジハリで格安利用する裏技とは

Photo by：Adobeマスター講座 | デジハリ公式サイト

結論はデジハリ・オンラインスクール「Adobeマスター講座」を活用することです。

Adobeマスター講座はAdobe Creative Cloud（学生・教職員個人向けライセンスプログラム）を、年間36,346円で使えるお得なパッケージプランです。デジタルクリエイティブスクールで有名な、「デジタルハリウッド（デジハリ）」が提供しています。

通常購入する場合と比較し、税込みで計算すると差額はなんと32,356円も安いです！！

Adobe公式サイトの正規品の約55%なので、実質45%オフ！3年だと10万円近く変わってきますね。

価格が安くなるだけではなく、Adobeソフトの基礎的な使い方を学べるオンライン講座も無料でついてくるので、もはやメリットしかないですね。普通に通常料金で購入している人が可哀想になるレベルです……。

基本的にいつもこの値段なので、Amazonのセールを待ったりする必要もないです。社会人でも問題なし。少しチートですね。

僕はもともとデジハリのデザインスクールに通っていたので、その時この方法を知りました。スクール卒業後も毎回同じやり方で購入しています。

もちろんこの方法で買ったからといってデジハリに通う必要は全くないですし、毎年同じやり方で買うことも可能です。必要なければ講座を受講する必要もないです。

これからAdobeソフトを始める方だけではなく、現役でAdobeを利用している方も知っておいて損はないはず！

「Adobeマスター講座」で学割・格安利用してみる | デジハリ公式サイト

なんでこんなに格安でアドビが利用できるの？

Adobeマスター講座を受講すると、なんとデジハリの学生扱いになるんですよ。だから社会人でも学生ライセンスが使えるので、安く利用できるというカラクリです。

デジハリはデジタルクリエイティブ教育に貢献してきた実績が評価され、アドビシステムズ株式会社から日本でも数少ない「プラチナスクールパートナー」に認定されています。なので、デジハリの学生はAdobe CCを特別価格で購入できる感じですね。

そして無料で付属するAdobeマスター講座は、デジハリが運営するオンラインスクールの基礎講座版といった感じで、つまりはスクールへの導入・広告ということですね。もっと知りたい人はオンラインスクールも受けてね、という具合です。

講座といっても課題や、学習ノルマは特に何もなく、オンライン講座なので好きな時に好きな内容を視聴することが可能です。オンライン講座が必要ない人は、全く視聴しなくても問題ありません。

またその後のオンラインスクールの申込みも必須では全くありません。変な営業が来たりもないです。

つまり、特に縛りもなく、Adobe CCを安く使えるメリットだけを受け取れるということです！とてもお得なのです。

「Adobeマスター講座」で学割・格安利用してみる | デジハリ公式サイト

デジハリ・オンラインスクール Adobeマスター講座の特典やメリットは？

Adobeマスター講座でAdobeを申し込むと、具体的にどんな特典やメリットがあるのかをまとめて見ていきましょう。

またデジハリのオンラインストアも使えるので、その他のソフトやハードも安く購入できる場合がありますので、探してみるとよいかなと思います。

無料の基礎動画講座で学べることは？

基礎動画教材はトータル46時間あり、Adobeソフトの基本的な使い方をわかりやすく学習することができます。

約20年以上デジタル教育事業を続けてきた、デジタルハリウッドのノウハウに基づき制作された動画なので品質は間違いないです。

無料講座で学べるソフトは下記になります。あくまで基礎の部分のみにはなりますが、十分な内容かと！

参考動画 ↓↓

解説動画を見ながら、その通りに自分で手を動かしてソフトを使い学んでいくスタイルです。ソフトの初期設定から基本的な利用方法を広く学べます。

僕も受講してましたが講座の質はしっかりしてますし、解説も分かりやすかったですよ。初心者向けに編集されている内容なので、途中でつまづくようなこともないかと思います。

デジハリに通うと、いつも上記講師の方が動画でレッスンしてますね。たまに学内イベントで登壇してたりもします。

こんな風にPhotoshopの楕円形選択ツールで色を抽出・変更したり。

注意点としては、トータル46時間あるので全部学ぼうとすると結構な量になります。割と大変です。1ヶ月で学び切るなら、自分で視聴するスケジュールを整理しておくことをおすすめします！！

僕は時間内に全部見切ることはできなかったので……。学習は計画的に！

公式サイトにカリキュラム詳細がPDFにまとめられているので、ぜひチェックしてみてください。
「Adobeマスター講座」で学割・格安利用してみる | デジハリ公式サイト

Adobeマスター講座のデメリット

特にデメリットはないですね。本当にないんですよ……。
Adobeマスター講座はいつも同じ価格で格安で購入できますし、オンライン講座などもついています。社会人でも成約なく格安で買えます。正直使わない理由がないです。

ただ強いて言えば、デメリットは下記くらいですかね。

• ソフト単体では買えない、あくまでコンプリートプランのみ
• 12ヶ月版のみなので、毎年買い替える必要がある

ソフト単体では買えない、あくまでコンプリートプランのみ

Adobeマスター講座は、PhotoshopやIllustratorなどシフト単体では購入できません。あくまでコンプリートプランのみです！

「Photoshopだけ使いたい！」という場合は、単体ソフトを買った方がいいです。しかし色々なAdobeのソフトを使いたくてコンプリートプランを検討しているなら、通常版を買うより全然デジハリ版の方が良いです。

12ヶ月版のみなので、毎年買い替える必要がある

Adobeマスター講座は、現状だと12ヶ月版プランのみです。

1ヶ月とか半年だけ使うとか、逆に3年分まとめて購入するなどはできません。1年以上使う場合は、ライセンスが切れたタイミングで毎年買い替える必要があります。といってもそこまで手間はないですが。

申込みにあたり注意点や補足事項

注意点もそこまでないのですが、思い当たるところは下記などです。

特に無料の基礎動画講座は、申込みから1ヶ月後までしか視聴できない点は気をつけてください！

動画を見たい方は、1ヶ月内でチェックするようにしましょう。

Adobe CC コンプリートプラン(通常版)の価格比較一覧

本当に他のセールと比較してデジハリAdobeマスター講座って安いの？と思われるかもですので、一応Adobe CC通常版の比較表を載せておきます。

価格は全て税込で統一しています。11月に開催されるAmazonの「ブラックフライデー」セールもなかなか安かったですが、デジハリの方がさらに安いんですよね。

価格としては最安ですし特典もついているので、周りの人にもぜひ教えてあげて欲しいところです！

デジハリ Adobeマスター講座の口コミ・評判は？

これだけお得感のあるデジハリのAdobeマスター講座ですが、実際の口コミ・評判はどうなのでしょうか？参考にいくつかピックアップしてみます。

価格・料金についての口コミ・評判

デジハリやべぇな。Adobe税激安やんけ
Twitter by セリポンさん

デジハリのアカデミックプランでAdobe CC 1年間 39,980円(税込)を購入して今日でちょうど1年経ったので更新したー。個人アカウントで契約してる人は間違えなく安いんでおすすめ

Twitter by GO NAKAMURAさん

Adobeコンプリートプラン、正規品の値段で購入しておりましたが、デジハリたる神の存在を知り早速購入。。。これで年間約4万円の経費が削減できる………
4万円なんて旅行行けるよ………もっと早く知っていれば。。。
Twitter by おおや かなさん

やはり料金に関してお得に感じている方は多いですね！まぁ正規品と比較し32,356円（45%）も安いので、当然と言えば当然ですが。

無料オンライン講座についての口コミ・評判

デジハリの年間契約のAdobeに変えたので、動画教材がついてきてそれ見てイラレの勉強をしている。Adobeが今まで通り使えて年間3万円安くなって勉強もできるし地味に嬉しい

Twitter by まめ2ndさん

おはようございます

デジハリ経由でAdobeを購入したの忘れてたので、昨日からデジハリの講座を受けてます！

早くPremiereとAfter Effects一通り使いこなせる様になりたい

今日も一日頑張りましょー

Twitter by NAO@ブログ太字の×印動画編集さん

#デジハリ Adobe講座 の話。

「Pr」の授業が見終わったので 今日から「Ps」の授業見てます。

普通に楽しい♪

Adobe CC 2ヶ月無料になるキャンペーンみたいのもあって、料金的には そっちの方が安いっぽいけど、主要ソフトの授業動画がついてくるデジハリ講座の方が お得感 あり。

Twitter by しむしむ ＠ UK駐在さん

前述の通り、極たまにAmazonのキャンペーンの方が少し安くなるケースがあります。ただここ最近はブラックフライデーよりもデジハリの方が安いですが。デジハリの場合は常時安い価格で買えるのとオンライン講座がついているので、お得感はやはりありますよね。

その他の口コミ・評判

今月はデジハリのAdobe講座を取ることにしました
たのまなとデジハリを比べたけど、たのまなは海外から使えないみたいだったので、デジハリにしました！

Twitter by あやみ☆*@NZさん

これは知らなかったですが、デジハリ Adobeマスター講座は海外経由でも使えるみたいです！クリエイターやデザイナーの方だと、海外でリモートワークやノマドをしたり、旅行中に作業しているケースも多いと思うので助かりますね。

全体的に価格や講座についての満足度は高そうです！オンライン動画講座も楽しみながら受けている口コミも多かったですね。

何度も言ってますが、通常料金で買うより確実にお得ですよ……！

Adobeマスター講座の申請方法と利用手順・使い方

デジハリ Adobeマスター講座の申し込み方法・利用手順・使い方を簡単に紹介します。

（1）デジハリ Adobeマスター講座へ申し込み

Adobeマスター講座への申し込みは、下記の公式サイトから確認してみてください ↓↓
「Adobeマスター講座」デジハリ公式サイト

（2）Adobeマスター講座の申し込み完了と案内メール

Adobeマスター講座の申し込み案内メール

公式サイトから申込み支払いが完了すると、デジハリから申し込み完了メールが来ます。

デジハリオンラインスクールの案内メール

続けて、デジハリオンラインスクール（Adobeの動画講座）の受講案内について別途メールにて案内がきます。

学習サイトへのログイン情報もそこに記載されていますよ！申し込みをしてすぐに動画講座の受講が開始されるので、とてもスムーズです。

（3）Adobe Creative Cloud シリアルコード発行

Adobe Creative Cloud シリアルコード発行の案内メール

続けてすぐに、運営からメールにてAdobe ccのシリアルコードが送られてきます。

そのメールに記載されているシリアルコードをAdobe CCの利用時に入力すれば、イラストレーターやPhotoshopなどのソフトをすぐに使えます！簡単ですね〜！

解約手数料なし！通常版「Adobe CC」から「デジハリAdobeマスター講座」へ切り替える方法

現在すでに通常版の「Adobe CC」を使っている方も、解約手数料なしで「デジハリAdobeマスター講座」へ切り替えることが可能です。

通常だと年間契約（月々払い）しているAdobe CCを解約する場合は、下記の解約手数料がかかります。

しかし学生・教職員個人向けライセンスプログラムである「Adobeマスター講座」に切り替える場合は、特に解約手数料なしで切り替え可能です。

切り替える手順

下記の手順でかんたんに切り替えることができます。

1. Adobe デジハリを購入しシリアルコードを取得

上記で紹介した手順に沿って、まず通常購入します。

2. Adobe公式サイトの問い合わせページへ

Adobe公式サイト | カスタマーケア

3. チャットから問い合わせ

Adobe公式サイト | カスタマーケア

画面右下にある「吹き出しマーク」をクリック。

4. ログインし、チャットで下記を伝える

Adobe公式サイト | カスタマーケア

チャット欄が立ち上げるので、ログイン後に下記を伝えましょう。

・通常版から、学生教職員版のコンプリートプランへ変更したい旨
・念のため、解約手数料が発生しないか要確認

5. 専用ページで更新登録する

指示に従い、先程購入したAdobeマスター講座のシリアルコードを伝えると専用ページを案内されます。
シリアルコードを入力し更新登録すると、自動で切り替えがされます。

Q&A デジハリ Adobeマスター講座についてよくある質問

最後にデジハリ Adobeマスター講座について、よく聞かれる質問についても回答しておきます。

社会人でも、翌年・2年目以降も同じ方法でAdobe CCを継続利用できるの？

こちらは問題なく、継続利用・購入可能です！僕も社会人になってから、毎年継続してデジハリのマスター講座を使ってAdobeを購入しています。

Adobeマスター講座の利用期限は1年なので、お申込みをした翌年・2年目・3年目以降も継続して購入すれば問題なく使えます。そのあたりは特に制限はないので、ご安心下さい。

ただし、デジハリのAdobeマスター講座がいつまで継続されるかは分かりません。僕はここ数年ずっと使っていますが、来年にはなくなってしまう可能性も0ではありません。

活用できるうちに、活用しまくった方がお得なはずです……！

自動更新はされない？

ご安心下さい、デジハリのAdobeマスター講座は自動更新されません。ライセンスの期限は基本1年ですので、期限が切れたらお好きなタイミングで更新すればOKです。期限が切れたら、Adobe側から更新通知が来る感じです。

ただし注意点としては、デジハリのAdobeマスター講座側ではなく、人によってはAdobe側の設定で自動更新がオンになってしまっている場合があります。気になる方は念のため、Adobe IDでご自身のアカウントにログインし、「請求・支払い方法」の欄から自動更新がオフになっているかどうかを確認してみて下さい！

またAdobe側で自動更新・再度申込みすると通常価格が適応されてしまうので、割引を受けたい方は必ずデジハリのAdobeマスター講座側から毎年お申込みを再度行うようにするようにしましょう！

Adobeアカウント側の自動更新は、必ずOFFにしておくのがベターです！

アカデミック版と通常版に違いはあるの？

特に違いはないです！

Adobeマスター講座はアカデミック版（学生版）を活用することで、格安でAdobeを利用することが可能です。

ですので「機能面で通常版と何か差異があるかも？」と思われるかもしれませんが、特に違い・差異はないのでご安心を。Photoshop、Illustrator、XD、After Effectsなど、普通に使えていますよ！

唯一の違いは、割引価格でかなり安いということくらいです！（つまりお得になる）

分割払いはできるの？

Adobeマスター講座の分割払いはできません。
（※デジハリが提供している講座のうち、5万円（税込）以上の講座は分割払いの対象です。Adobeマスター講座はその対象外。）

支払い方法はクレジットカードのほか、コンビニ決済、銀行振込が利用できます。

途中で解約・キャンセルはできるの？

途中での解約やキャンセルはできません。Adobeマスター講座は手続きが完了次第、すぐAdobe Creative Cloudのシリアルコードの発行、および講座受講が開始されます。利用することを決め次第、購入手続きを進めるようにしましょう。

法人名義で申込みはできる？

デジハリ Adobeマスター講座を法人名義で申込みすることは、残念ながら不可です。個人名義のみ購入・利用ができます。

ですので、個人名義で購入するのであれば、個人もしくは個人事業主・フリーランス、会社員の方も問題なく購入できますよ！

どうしても法人名義で購入したい事情がある方は、Amazonで通常版を購入しましょう。セールやキャンペーン時ではなくても、公式サイトで買うよりはAmazonの方が消費税が含まれた価格になっていたりと、多少安くなってる場合があります。

Adobe Creative Cloud コンプリート|12か月版|Windows/Mac対応|オンラインコード版

Adobeマスター講座はフリーランスでも活用できるの？

上述の通りですが、デジハリのAdobeマスター講座はフリーランス・個人事業主の方でも問題なく利用可能です！

商用利用はできるの？

商用利用は問題なくできます！ 個人事業主・フリーランス、会社員の方でも商用で使ってOKです。

ただし上述した様に法人名義での申込みはできないので、購入時にそこだけ注意って感じですね。

デジハリAdobeマスター講座の領収書は発行できる？

領収書は発行できますよ！　申込み時に宛名を指定しておけば、あとで領収書をデジハリ側が発行してくれます。

領収書の名義自体は自由に設定可能なので、個人事業主・フリーランス、会社員などで経費申請したい方は、忘れず申請するように！

【まとめ】Adobe CCを格安利用するなら、デジハリの学割が最強！

Adobe Creative Cloudを格安で利用するなら、デジタルハリウッドの学割利用が最もおすすめです！マジでお得ですよ〜。

社会人でも学割でアドビソフトを購入できるので、これから初めて使う人も、今まで使っていた人もぜひチェックしてみて欲しいです。

最後に改めてAdobeマスター講座のメリットをまとめておきます。

申し込みしたい方やカリキュラム詳細は知りたい方は、下記公式サイトへどうぞ ↓↓
「Adobeマスター講座」で学割・格安利用してみる | デジハリ公式サイト

参考までに、僕がデジタルハリウッドのデザインスクールに通っていたときの体験談も載せときます ↓↓

関連記事【デジタルハリウッド授業体験記 #1】デジタルデザイン専攻_HTMLの基礎

2020.11.23

関連記事Webデザインスクール・専門学校に通うメリット・デメリットを経験者が比較してみた

2023.09.30

※2022/4/27 追記

こんにちは！「Tekito style」を運営しているやすのり（@98nasi_nori）です。普段は都内でWebディレクター/マーケターなどをしています。

お問い合わせフォームを作りたいけど、簡易的な機能でいいので簡単に実装したいという方も多いはず。

Googleフォームを埋め込むことも可能ですが、デザインがあからさまにGoogleフォームだと分かるのがネックです。

そこで本記事では、Googleフォームを活用しつつ、デザインもお好みでカスタマイズできる方法を解説します。

複雑なフォームは難しいのですが、HTMLとCSSが分かればプラグインも不要で簡単にフォームを実装できますよ！

まずはGoogleフォームの完成形を確認

こんな感じで、上記のようにテキストのみのフォームであれば簡単に実装できますよ。

回答内容は、通常のGoogleフォームと同じように指定のスプレッドシートに溜まっていく感じです。

アンケートの回答サンプル | Googleスプレッドシート

またデザインは独自のCSSを当てて、カスタマイズしていく必要があります。

Googleフォームのデザインをカスタマイズする方法

さっそく、Googleフォームを実装していきましょう！

1. 通常のGoogleフォームを作成

お使いのGoogleアカウントにログインをし、Googleドライブから通常と同じようにGoogleフォームを作成します。

必要なアンケート項目を設定していきます。今回は「記述式」と「段落」のテキストフォームのみで作成。

2. フォームのURLを取得

続いて、作成したGoogleフォームのURLを取得していきます。

画面右上にある「送信」ボタンをクリックします。

モーダル画面が開くので、メールアドレス右横のアイコンをクリック。

アンケートフォームのURLをコピーし、どこかにメモしておきましょう！次のname値などを取得する時に使います。

3. 各入力タグのname値などを取得する

続いて、先ほど取得したGoogleフォームのURLを叩き、デベロッパーツールを開きます（MacならCommand+option+I）。

デベロッパーツールでGoogleフォームのソースコードを見ながら、各種name値とformのaction値を取得していきます。

name値

先程作成したGoogleフォームの各入力要素（input、textarea）に組み込まれている、name値を取得してきます。

こんな感じで、少しネストの深いところにあるので、見つけるのは少し大変かもしれません。

name="entry.◯◯◯◯（数字）"

となっているところが対象箇所です！

なかなか見つけられない場合は、command+Fで検索ボックスを開き、「entry.」で検索するとすぐに対象箇所が分かりますよ。

今回は下記の3要素なので、それぞれのname値を確認し、まとめてメモしておきましょう。

<div jsname="　">
<input type="hidden" name="entry.◯◯◯" value="">
<input type="hidden" name="entry.◯◯◯" value="">
<input type="hidden" name="entry.◯◯◯" value="">
</div>

formタグのaction値

続いて、formタグのaction値も合わせて取得していきます。

<div class="freebirdFormviewerViewCenteredContent">

の配下にあります。formタグにカーソルを合わせればすぐ見つかるはずです。

<form action="https://docs.google.com/forms/u/0/d/ 〜〜〜 /formResponse">

「https://docs.google.com/forms/ 〜 /formResponse」となっている箇所です。こちらもメモに控えておきます。

https://docs.google.com/forms/u/0/d/ 〜〜〜 /formResponse

name="entry.◯◯◯◯"

name="entry.◯◯◯◯"

name="entry.◯◯◯◯"

上記の要素をまとめてメモしておきましょう！

4. HTMLタグでフォームの骨組みを作る

続いて、通常フォームをつくるように、HTMLでアンケートフォームの骨組みをつくっていきます。

一応下記に簡単なサンプルを用意しておきますね。

<form action="◯◯◯◯（GoogleフォームのURL）">
	<label for="form-name">・お名前（ニックネーム）</label>
	<p><input id="form-name" type="text" name="entry.◯◯◯◯" placeholder="名前だよ" required=""></p>

	<label for="form-mail">・メールアドレス</label>
	<p><input id="form-mail" type="email" name="entry.◯◯◯◯" placeholder="example@mail.co.jp" required=""></p>

	<label for="form-detail">・お問い合わせ詳細</label>
	<p>ご不明な点があれば、お気軽にご連絡くださいませ（最大1,000文字）。</p>
	<p><textarea id="form-detail" name="entry.◯◯◯◯" placeholder="ご自由にご記載下さい。" required=""></textarea></p>

	<p><button type="submit" name="button" value="送信する">送信する</button></p>
</form>

入力項目のtypeの値はテキストであれば「text」、メールアドレスは「email」を指定しておきましょう。

また入力必須にしたい場合は、

required=""

をあわせて各要素に指定します。

CSSは各自で後ほど調整してくださいね。

5. HTMLタグにname値を組み込む

先程作成したHTMLベースのアンケートフォームに、Googleフォームから取得した各入力項目のname値、およびformのaction値を組み込んでいきます。

inputタグの

name="entry.◯◯◯◯"

の箇所に、対応する数値を追記していきます。

またformタグの

action="◯◯◯◯（GoogleフォームのURL）"

の箇所に、最初に取得したGoogleフォームのaction値をそのまま貼り付けます。

6. 実際にアンケートに回答し挙動をテスト

組み込みが完了したら、アンケートを実際に送信してテストしてみます。

無事OKなら、これでひとまず最低限の実装は完了です！お疲れさまでした！

もしうまく行かない場合は、下記の項目を改めて確認してみて、再度テストしてみましょう。

7. サンクスページへの遷移について

このままの仕様だと、アンケートを回答完了すると、Googleフォーム側のサンクスページ（回答完了ページ）に飛んでしまいます。

せっかくフォームをサイトに埋め込んだのに、ちょっと残念な感じですよね。サイトからの離脱にも繋がります。

これを回避するには、回答を完了した場合に指定のサンクスページに遷移させる必要があります。

色々調べていたのですが、下記記事を参考にさせていただきました！感謝！
https://borderlessryohei.com/form-customize/

まずはサンクスページを作成する

こんな感じで、まずは適当にサンクスページを作成しましょう。

WordPressなら固定ページで簡単に作成できますよ。

HTMLのフォームに下記要素を追加

まずformタグに下記を追加します。

method="post" target="hidden_iframe" onsubmit="submitted=true;"

さらにformタグ下部に、下記スクリプトも追加します。

<script type="text/javascript">var submitted = false;</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted){window.location='◯◯◯◯（サンクスページのパス）';}"></iframe>

下記が組み込みの全体図。

<form action="◯◯◯◯（GoogleアンケートのURL）" method="post" target="hidden_iframe" onsubmit="submitted=true;">
	<label for="form-name">・お名前（ニックネーム）</label>
	<p><input id="form-name" type="text" name="entry.◯◯◯◯" placeholder="名前だよ" required=""></p>

	<label for="form-mail">・メールアドレス</label>
	<p><input id="form-mail" type="email" name="entry.◯◯◯◯" placeholder="example@mail.co.jp" required=""></p>

	<label for="form-detail">・お問い合わせ詳細</label>
	<p>ご不明な点があれば、お気軽にご連絡くださいませ（最大1,000文字）。</p>
	<p><textarea id="form-detail" name="entry.◯◯◯◯" placeholder="ご自由にご記載下さい。" required=""></textarea></p>

	<p><button type="submit" name="button" value="送信する">送信する</button></p>
</form>
<script type="text/javascript">var submitted = false;</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted){window.location='◯◯◯◯（サンクスページのパス）';}"></iframe>

iframeタグの中の下記箇所には、「/contact/thanks-page」など先ほど作成したサンクスページのパスを記述します。

if(submitted){window.location='/contact/thanks-page';}

実際にアンケートを送信する

改めてアンケートを送信してみて、先ほど設定したサンクスページが表示されていればOKです！

もし上手く遷移しなければ、サンクスページのパスがあっているか、改めて確認してみましょう。

8. 最後にCSSでデザインのカスタマイズ

すべての挙動に問題がなければ、最後に作成したGoogleフォームにお好みのCSSを当てて、デザインを自由にカスタマイズしてみてください。

フォームのCSSをいじるのはなかなか面倒ですが、せっかくなのでデザインにこだわってみてはいかがでしょうか。

デスクトップだけではなく、スマフォ、ダブレットそれぞれで表示が崩れていないかの確認は忘れずに！

これですべての工程が完了です。お疲れさまでした！

【まとめ】簡易的なら、Googleフォームのカスタマイズで十分！

ここまでGoogleフォームのデザインをカスタマイズする方法をまとめてきました。

少しステップがややこしいですが、難しいことはほとんどないので、ある程度HTMLとCSSを使えれば十分実装できるかなと思います。

という方にはおすすめの方法ですよ。ぜひご参考いただけますと幸いです。

本サイトで活用しているWordPressテーマはこちら ↓↓

関連記事ワードプレステーマ STORK19（ストーク）の評判・口コミまとめ【経験者がレビュー】

2023.09.30

こんにちは！「Tekito style」を運営しているやすのり（@98nasi_nori）です。普段は都内でWebディレクター/マーケターなどをしています。

日々Webメディアやブログの数値計測をしていると、

毎日Googleアナリティクスの数値を計測するのが面倒くさい……。

と思う方は多いはず。なんとか計測を自動化して工数を圧縮したいところですよね。

Googleが提供しているGAS（Google Apps Script）とスプレッドシートを活用すれば、こうした悩みを解決できます（ある程度はアドオンでもできますが）。

今回はGASを使い、Googleアナリティクスで取得できる基本的な数値（PVやUU数、離脱率など）を自動計測する方法を初心者向けに紹介していきたいと思います。メディア運用者やブロガーの方は参考にしてみてくださいね。

GAS（Google Analytics Script）とは？

GAS（Google Analytics Script）はGoogleが提供するプログラミング言語。

GASを活用できるとアナリティクスはもちろん、GoogleマップやGメールなど、Google提供の各種ツールと連携することができます。またSlackなど、ツール次第ですが外部ツールと連携も可能です。

JavaScriptがベースになっているので、書いたことがあればすんなり使うことができるはずです。ただ最新のECMAScript 6（ES6）の記法に対応していない感じなので、変数や関数などはそれ以前のバージョンでの記述をする必要があります。

「そもそもJavaScriptがまったくわからない……」

という方はドットインストールやProgateなど、プログラミング学習サービスを一周して基礎を確認しておきましょう。

とりあえず早く使いたい方は、下記で紹介するコードをコピペして使うこともできるので、ぜひ参考にしてみてくださいね。

GASの基本的な使い方

GASの使い方をざっと確認していきましょう。

1. スクリプトエディタを開く

Googleドライブにログインし、任意のスプレッドシートを作成します。続いて、作成したGoogle スプレッドシートのツール欄から、「スクリプトエディタ」をクリック。

すると別タブでスクリプトエディタが開きます。

2. 新規スクリプトファイルを作成

メニューのファイル欄から、「New」> 「スクリプトファイル」をクリック。

「test」などファイル名を指定して保存します。

3. Logを出力してみる

テストでログを出力してみましょう。

先程作成したファイルに、エディタ上に下記コードを記載します。

function Test() {
Logger.log('testでログを出力しています');
}

実行したい「Test」関数を指定し、三角の再生ボタンをクリック。すると指定した関数が動作します。その後「表示」>「ログ」をクリックします。

すると、上記のようにログが正しく実行されていることを確認できます。

タスク内容とGASコードの全容

今回はサンプルとして、下記の基本的なGoogle AnalyticsのデータをGASを用いて取得していきます。

GASコードの全体像

下記が今回使うコードです。とりあえずこれをそのまま貼れば一応動作はします。

アナリティクスのデータを取得するにあたり、アナリティクスIDは別途ご自身のID名を記載する必要があります。

function getGaDataPrevDay() {

//-------日時データの取得-----------
// 昨日の日付を取得する
var date = new Date();
date.setDate(date.getDate() - 1);

//年度を取得する
var year = date.getFullYear();

//曜日を取得する
var ary = ['Sun', 'Mon', 'Tue', 'Wed', 'Thr', 'Fri', 'Sat'];
var weekDayNum = date.getDay();//曜日番号の取得
var weekDay = ary[weekDayNum] ;

//-------GAデータ-----------
// GAからデータを取得する関数の定義
function getGaData(startDate, endDate) {
var gaData = Analytics.Data.Ga.get(
'ga:※※※※※※※※※※', //アナリティクスで使っているID名を記載
startDate,
endDate,
'ga:pageviews, ga:sessions, ga:users, ga:newUsers,ga:bounceRate,ga:exitRate,ga:avgSessionDuration,ga:pageviewsPerSession, ga:totalEvents'
).rows;

return gaData;
}

// 戻り値（指定期間）を指定し、関数を実効
var gaData = getGaData('yesterday', 'yesterday');

//-------スプレッドシートへの書き込み-----------
// 書き込むシートを選択する
var spreadSheet = SpreadsheetApp.getActiveSpreadsheet();
var sheet = spreadSheet.getSheetByName('Daily'); //集計するシートタブ名を指定

//最終行+1行目の取得
var lastRow = sheet.getLastRow()+1;
//最終行+1行目を追加
sheet.insertRows(lastRow);

//追加した行に書き込む
sheet.getRange(lastRow, 1).setValue(year);
sheet.getRange(lastRow, 2).setValue(date);
sheet.getRange(lastRow, 3).setValue(weekDay);
sheet.getRange(lastRow, 4).setValue(gaData[0][0]);
sheet.getRange(lastRow, 5).setValue(gaData[0][1]);
sheet.getRange(lastRow, 6).setValue(gaData[0][2]);
sheet.getRange(lastRow, 7).setValue(gaData[0][3]);
sheet.getRange(lastRow, 8).setValue(gaData[0][4] + "%\n");
sheet.getRange(lastRow, 9).setValue(gaData[0][5] + "%\n");
sheet.getRange(lastRow, 10).setValue(gaData[0][6]/60);
sheet.getRange(lastRow, 11).setValue(gaData[0][7]);
sheet.getRange(lastRow, 12).setValue(gaData[0][8]);

//-----セルのフォーマット指定-------
//日時データのフォーマット
var FormatDate = sheet.getRange("B:B").setNumberFormat("MM/DD");
//直帰率
//var FormatBounceRate = sheet.getRange("H:H").setNumberFormat("0.00%");
//滞在時間
var FormatDuration = sheet.getRange("J:J").setNumberFormat("#,##00.00");
//ページ/セッション
var FormatPageSession = sheet.getRange("K:K").setNumberFormat("#,##0.000");
}

データ自動集計の設定方法・手順まとめ

続いて、具体的な進め方を紹介します。

1. スプレッドシートに新規タブを作成

データの収集先として、スプレッドシートに「Daily」タブを新規で作成します。
※名称は何でもいいのですが、先に紹介したコード内で同じシート名を指定する必要があります。

2. 項目名称を記載しておく

集計されたデータが何か判別できるように、下記の項目を事前にシート上に記載しておきましょう。

項目名はご自由に設定してみてくださいね。ただし順番を入れ替える場合は、コード上でも順番を入れ替える必要があるのでご注意を。コードが良くわからない方は、順番はとりあえず下記の通りに記載してください。

3. GASコードをコピペする

スクリプトエディタ上で、新規スクリプトファイルを作成します。ファイル名は何度もOKです。

先程のGASコードをコピペし、保存しましょう。またアナリティクスのデータを取得するにあたり、アナリティクスのIDは各自変更しておいてください。

※「getGaData」関数内の変数「gaData」> ‘ga:※※※※※※※※※※’の欄。

4. 発火してみる

先程テストでやったように、三角の再生ボタンをクリックし、スクリプトファイルを動作させてみましょう。すると、スプレッドシート「Daily」上で、各種アナリティクス数値が集計できているはずです。

5. 自動集計する設定をしてみよう！

このままだと自動でデータ集計はしてくれないので、毎日自動で実行されるように別途設定する必要があります。

まずスクリプトエディタのメニューから「編集」をクリックし、「現在のプロジェクトのトリガー」を選択します。

「G Suite Developer Hub」のページが開くので、画面右下にある「トリガーを追加」をクリックします。

下記のように任意の設定をし保存します。すると、指定した時間やタイミングでデータを自動集計してくれるようになります。

GASコードの参考メモ

今回のコードを作成するにあたり、調べつつ気になった箇所をメモ程度ですが残しておきます。

曜日指定について

曜日を取得する場合は数値で返ってくる（日曜日は0など）ので、以下のスクリプトで数値を曜日名に変更しています。

//曜日を取得する
var ary = ['Sun', 'Mon', 'Tue', 'Wed', 'Thr', 'Fri', 'Sat'];
var weekDayNum = date.getDay();//曜日番号の取得
var weekDay = ary[weekDayNum] ;

アナリティクスのデータ取得

Analytics.Data.Ga.get().rows

こちらを使うと、簡単にアナリティクスにアクセスができます。最後に「.rows」とつなげることで、データ項目を取得します。

Analytics.Data.Ga.get(
‘gaのID',
startDate,
endDate,
'取得項目'
).rows;

PV（ga:pageviews）、新規ユーザー数（ga:newUsers）など、データの取得項目の指定名称については、下記のサイトで確認することができるのでぜひチェックしてみてくださいね。
Query Explorer

GAデータ取得後のスプレッドシートへの記載

1. 現在のスプレッドシートを選択

var spreadSheet = SpreadsheetApp.getActiveSpreadsheet();

2. スプレッドシートのさらに「Daily」シートを取得

var sheet = spreadSheet.getSheetByName('Daily');

3. 最終行の取得
シートに新規データを書き込む時は、一番下の空白行にデータを記載したいですよね。

下記だと、最終行（データが記述されている一番下の行）を取得します。

var lastRow = sheet.getLastRow();

しかしこのままだとデータを上書きしてしまうので、最終行に新規空白行を1行追加して、そこに数値を更新するようにします。

var lastRow = sheet.getLastRow()+1;

まとめ

ここまでGAS（Google Apps Script）を使って、基本的なアナリティクスのデータを自動取得してみましたが、いかがでしたでしょうか。僕は今回はじめてGASを使ってみましたが、普段の業務効率化をいろいろできそうなので、もっと勉強していきたいところ。

毎日数値を更新するとなると、なかなか面倒くださいのでぜひ活用してみてくだいね。難しかったらアナリティクスのアドオンを使ってみると良いでしょう。

またコピペするのもよいですが、実際にGASコードをいじってみて、それぞれの挙動をチェックしてみると理解を深められるかなと思います。セルのフォーマット指定など、今回のコードではいまひとつ効率的にできていない箇所もあるので、ぜひ各自ブラッシュアップいただけると幸いです。

それでは！

こんにちは！「Tekito style」を運営しているやすのり（@98nasi_nori）です。普段は都内でWebディレクター/マーケターなどをしています。

サイトスピード改善でもっともネックになるのが画像。画像データは基本的に重いので、圧縮するなどできる限り軽量化することが望ましいです。

そこでぜひ試してみたかったのが、画像のWebP（ウェッピー）対応をすること。WebPはGoogleが開発・推奨している最新の画像形式で、画像の軽量化を期待できます。

WordPressサイトの場合ですと、プラグインを使えば比較的簡単にWebPに対応することができます。今回はWordPressサイトにおける画像のWebP化の設定方法や注意点などを解説していくので、サイトスピード改善を検討している方はぜひチェックしてみてください。

WebP（ウェッピー）ってどんな規格？

WebP（ウェッピー）はGoogleが開発し導入を推奨している静止画像フォーマット。拡張子はそのまま「◯◯◯.webp」となります。

JPEGなど従来の画像フォーマットと比較すると、2〜3割近く画像を軽量化することができます。

A new image format for the Web
WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.

（Web用の新しい画像形式
WebPでロスレス圧縮（可逆圧縮）された画像は、PNGと比較してファイルサイズが26％小さくなります。またWebPで非可逆圧縮された画像は、JPEGの場合、同等のSSIM品質指標の画像よりも25〜34％サイズが小さくなります。）
by：https://developers.google.com/speed/webp

Googleが提供しているサイトスピード計測ツール「PageSpeed Insights」では、JPEG XR、JPEG 2000などと同様に利用することを推奨されています。

Google神が勧めるのであれば、できる限り導入を検討した方が良いでしょう！

WebPの対応ブラウザは？

WebPは新規の画像形式ということもあり、対応していないブラウザやバージョンがあるのが現状です。

Google ChromeやFirefox、Operaなどでは対応していますが、利用ユーザーの多いSafariや、IEではまだ未対応です（2019年9月現在）。

Photo by：WebP image format

未対応のブラウザではWebPの画像は表示されませんので、「WebPの選択的レスポンス」つまり画像の出し分け設定をする必要があります。例えばWebPに対応しているChromeではWebPを、対応していないSafariでは従来の画像形式であるJPGやPNGを表示するなど。

一見難しそうですが、WordPressサイトの場合はプラグインの導入と「.htaccess」のファイルを少し追記するたけで設定できます。

WebPの設定方法

WebPの設定方法は、WordPressの場合そこまで難しくありません。一つ一つ確認していきましょう！

1. EWWW Image Optimizerの導入

photo by：wordpress公式サイト

まず画像圧縮・最適化のプラグイン「EWWW Image Optimizer」をインストール・有効化します。導入方法は基本的に他のWordPressプラグインと同じです。

このプラグインを活用すると、画像圧縮はもちろん、画像に保存されている不要なメタデータを削除したり、画像のWebP対応をする設定も可能です。とっても便利ですね。

EWWW Image Optimizerの詳細な使い方については、以下の記事を参考にしてみてください。

関連記事画像圧縮・最適化プラグインEWWW Image Optimizerの使い方・設定方法まとめ

2020.04.20

2. EWWW Image Optimizerで設定

EWWW Image Optimizerを有効化したら、「WebP」タブを開きます。

にチェックし、「変更を保存」をクリック。

するとコードが表示されるので、これを「.htaccess」ファイルに追記します。

この時点では画像のWebP対応が完了していないので、画面右下に赤枠で「PNG」を表示されています。WebP対応が完了すると、これが緑の枠で「WebP」表記に変更される感じです。

3. 「.htaccess」ファイルへ追記

サーバー内の「.htaccess」ファイルを、FTPソフトなどを使い開きます。

対象となるWordPressサイトの下記ディレクトリまで移動します。

.htaccessファイルを見つけたら、ダウンロードします。

先頭に「.（ピリオド）」がつくのはUNIX系OSで不可視ファイルを意味するので、場合によってはダウンロードしてもファイルを確認できない場合があります。その場合は下記のキーを打つと、隠しファイルを表示することができます。

ちなみにWikipediaでは.htaccessファイルを下記で定義しています。

.htaccess（ドットエイチティーアクセス）とは、Apacheを用いたWebサーバにおいて、ディレクトリ単位で設置及び設定を行える設定ファイルである。
wikipedia

BASIC認証やリダイレクトの設定など、簡単に言えばWebサーバの動作を制御する設定ファイルって感じですかね。記述をミスるとサイトが表示されなくなったりするので、あまり触れたくないファイルではあります……。

<ifmodule mod_rewrite.c="">
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]
</ifmodule>
<ifmodule mod_headers.c="">
Header append Vary Accept env=REDIRECT_accept
</ifmodule>
AddType image/webp .webp

ファイルの先頭などに先程のコードを記載し、完了したらFTPでサーバー上にアップし上書きします。

こちらのコードの改良版については色々サンプルがあるので、「WebPの選択的レスポンス」について色々調べてみると良いかもです。上記のコードでも問題なく動作はしますので、今回はこのまま進めます。

4. EWWW Image OptimizerでWebP化

EWWW Image Optimizerを有効化し、「.htaccess」ファイルへの追記が完了すれば、これからアップロードされる画像については全て自動的にWebPへ最適化されます。

しかし注意点としては、設定前にアップロードした画像については自動的にはWebPへ最適化されません。ですので手動で最適化する必要があります。といってもほぼワンクリックで完了です！

WordPressの管理画面から、メディア ＞ 一括最適化へ進めます。

「再最適化を強制」を選択し、「最適化されていない画像をスキャンする」をクリック。

続いて「最適化を開始」をクリック。

最適化が開始されていきます。これでこれまでアップロードされた画像を含めてWebp化してくれます！

最適化完了後、先程確認したEWWW Image Optimizerの設定画面の「WebP」タブを確認すると、画面右下に「WEBP」の表示を確認できます。

写真一覧でもWebP対応がされていることを確認できます。

これで無事画像のWebP化は完了です！！

WebPの反映を確認する方法

WebP対応が実際に動作しているのか実際に確認してみましょう。Google Chromeの検証ツールで確認可能です。

WebP対応したWordPressサイトを開き、デベロッパーツールを開きます。

を選択します。

Typeの項目を確認し、「webp」の表示が確認できればWebP化できています。

PageSpeed Insightsでも、「次世代フォーマットでの画像配信」の項目が合格できています！！

また実際にsafariやIEなどWebP対応していないブラウザでは、JPGやPNGなどのフォーマットで画像が表示されているのか（画像形式の出し分けができているのか）必ず実機で確認しておきましょう！

画像データはWebPで軽量化すべし！

ここまでWordPressサイトにおける、画像のWebP対応方法ついて紹介してきました。

サイトスピードを下げる主要因である画像データは、今回紹介したWebP対応するなどできる限り軽量化していきましょう。プラグインを活用すれば導入ハードルは低いですよ。

今回紹介したプラグイン「EWWW Image Optimizer」の使い方については、以下の記事も参考にしてみてくださいね。

関連記事画像圧縮・最適化プラグインEWWW Image Optimizerの使い方・設定方法まとめ

2020.04.20

またサイトスピード改善で実施した施策とスコアの検証結果については、下記の記事で全てまとめていくので、よかったら施策の参考にしてみてください。

関連記事WordPressのサイトスピード改善で実施した12の施策とスコア結果まとめ

2019.11.30

下記記事では、WordPressのおすすめプラグインを厳選して紹介しています ↓↓

関連記事おすすめ＆定番のWordPressプラグイン12選まとめ

2020.07.14

こんにちは！「Tekito style」を運営しているやすのり（@98nasi_nori）です。普段は都内でWebディレクター/マーケターなどをしています。

Webサービスを運営していると、ユーザーがサイト上でどう行動しているのか、またどこで操作につまずいているのかはユーザーテストなどをしないと具体的に見えづらいところ。

また知らぬ間に発生したエラーやちょっとしたバグなどが、ユーザビリティを損なっている可能性もあります。

そこで便利なWebサービスが「LogRocket」。たった1行のJSコードをheadタグに組み込むだけで、ユーザー行動を動画で記録できるサービスです。定性分析やエラーチェックでかなり役立ってくれそうです！

今回はそんなLogRocketの使い方や注意点などを解説していくので、サイトのUX改善やバク発見ツールを検討している方はぜひチェックしてみてください。

LogRocketってサービス？

LogRocketはWebアプリケーション上のユーザー行動をリアルタイムに動画で記録できるサービス。マサチューセッツ州ケンブリッジ発のスタートアップ企業で、2019年3月にはシリーズAにて1,100万ドル（約12.2億円）を調達してますね。

このように、ユーザーがサイト上でどのような動きや操作をしたのかを動画で可視化してくれます。面白過ぎてずっと見てられますね！

利用にあたっては、JSのトラッキングコードをサイトのheadタグに組み込むだけ！とても簡単です。しかも月5,000セッションまで無料で利用可能です。対応言語はいまのところ英語のみ。

Webアプリケーション上で発生したエラーを迅速に特定することを利用シーンとして想定されていますが、ユーザーが意図した行動を取っているのか、どこで操作に詰まっているのかなど定性分析の面でもかなり利用できそうです。

LogRocket公式サイト

LogRocketの導入方法

LogRocketの導入方法を見ていきましょう！基本的に設定はとても簡単です！

1. まずは公式サイトへ

Photo by：logrocket.com

公式サイトのTOPページから「Get Started Free」をクリックしましょう。

GithubかGoogleアカウント、もしくはメールアドレスでアカウントを作成します。

「CONTINUE」で次へ進みます。

2. プロジェクト名を決める

プロジェクト名を指定します。1つのアカウントで複数サイトのデータを管理することができるので、サイト名などを記載しておくといいでしょう。

またプロジェクトメンバーもここで招待することができます。無料版だと3名までですね。

3. 計測タグの設置

続いて計測の設定をします。設定方法はnpm（Node Package Manager）か、JSタグをheadに組み込むかの2パターンあります。

基本的にはJavascriptコードをheadタグへ組み込み方法で良いかなと思います。

WordPressサイトの場合はテーマのカスタマイズ欄やタグマネージャーで管理、もしくはサイトのheadタグへ直接記述しましょう。

npmを使って組み込むことも可能です。

タグを設置してLogRocketの画面に戻ると、ローディング画面になります。

しばらくするとLogRocketの管理画面が表示されます。5分〜10分くらい経つと訪問ユーザのログが溜まり始めます！これで設定自体は全て完了です。簡単ですね！

LogRocketの使い方

LogRocketの使い方を確認していきましょう。

1. セッションごとのユーザーログを見る

LOGROCKETタブを開いた状態にすると、

の3つのタブがあります。それぞれ確認してみます。

LATEST（最新）

LATESTタブでは、新着順に最新のログを見ることができます。とりあえずどんな風にユーザーログが取れているのか確認してみると良いでしょう。

ログ一覧では、ログが再生された時間と場所、デバイスなどが表示されています。「▶」の再生ボタンを押すとログの詳細を確認できます。

クリックすると上記の画面が表示され、再生ボタンでユーザーの行動ログをすぐに確認可能です。

2倍速、４倍速、8倍速再生に対応しています。なかなか便利ですね。

ネットワークリクエスト情報も確認でき、リソースごとにソートして閲覧可能。

Logsタグでユーザーの動作ごとに発生したログや警告などの情報も確認できます。どの操作をしたタイミングでエラーが発生したのか、エラー原因の特定に役立ちそうですね。僕もざっと見ていたらリンク切れのエラーなどを確認できました。

Detailsタブでは、ユーザーのデバイス情報やセッション日時などのログの詳細情報を確認できます。

SESSIONS

SESSIONSタブでは、指定期間に絞ってユーザーログを見ることができます。

上記の設定だけでなく、細かく期間を指定することも可能。

ERROS

発生したエラーごとのユーザーログを確認できます。どれくらいの人数のユーザーに、いつ発生したのかを確認できるので、高頻度で発生しているエラーの発見などに役立ちそうですね。

エラーのステータスも、

のタグを管理し、絞り込みをすることができます。

エラーが発生した時期・頻度も選択可能です。

エラーの詳細を見ると、どのページで、どのデバイス、どのブラウザーでいつ発生しているのかがある程度分かります。

問題なければ「resolve」や「Ignore」などエラーにタグ付けして整理してみましょう。

2. ユーザー属性を切り替えて検索

上記までのログは「EVERYONE」タブで見てきましたが、以下の項目からユーザーを切り分けてログを確認することもできます。

よく使うであろう項目をLogRocket側で事前に設定してくれていますので、ぜひ使ってみましょう。

Signed-up

事前に設定すれば、サービスのログインユーザーのみに絞ってログを確認できます。特にログイン機能などがなければ使う機会はない感じですね。

Mobile

モバイルユーザーのみに絞ってログを閲覧できます。ちなみにPC、タブレット、mobileのデバイスごとに切り替えられます。

New Users

特定期間の新規ユーザーに絞ってログを確認できます。期間も調整可能。

Inactive Users

特定期間にアクティブではないユーザーに絞ってログを確認できます。

3. 詳細絞り込み検索

僕もすべて使いきれていませんが、更に詳細な条件に絞ってユーザーログを検索することも可能です。検索ボックスをクリックすると検索項目が表示されます。

検索項目は上記のカテゴリに分けられています。複数項目を組み合わせて検索できるのでとっても便利。

たとえば、よく使いそうなのは「SP版かつiOSデバイス、かつ特定のページに訪問したユーザー」など。めっちゃ便利やん！！特定ページにランディングしてきたユーザーが意図した行動を取っているか、色々と仮説検証を深ぼれそうです。

さらにページの指定には以下の条件指定ができます。かゆいところに手が届く感じですね。

LogRocketの設定欄

LogRocketの設定欄も合わせて確認していきましょう。「SETTINGS」タブを開いた状態にします。

Project Setup

基本的な環境設定の進捗が確認できます。

ここで特定ユーザーに対してIDを付与できます。メールアドレスや名前、IDなどを指定しておけば、特定ユーザーのログを絞り込んで確認できる感じですね。

Integrations

特定のライブラリやツールなどを、LogRocketと連携させることができます。

Githubなどとも連携できるみたいですね。

General Settings

プロジェクト名やAPI Keyなどの確認・設定ができます。

Error Settings

特定期間を過ぎたエラーは解決済みにするなど、エラーの自動対応についての設定ができます。

Slackにエラー通知をする設定もできるみたいですね。

Plan Usage & Upgrade

LogRocketのプラン設定が可能です。メールアドレスの設定もここで可能です。

無料版は1ヶ月5,000セッションまでなので、サイト規模によっては一瞬で容量を使ってしまうかと思います。また容量は1ヶ月後にリセットされます。

LogRocket Trial（無料版）は2週間しか使えないのかなと思ったのですが、今のところ2週間過ぎても全然使えますね（容量を超えれば新規のデータは記録されなくなりますが）。

Team Settings

プロジェクトの共有設定や、チームメンバーの招待もここで可能です。

LogRocketを有効活用しよう！

ここまでLogRocketを紹介してきましたが、いかがでしたでしょうか？

サイトのUX改善や、エラーチェックなどで役立つ場面が多くありそうです。ここまでの機能を無料で利用できるなんて、なかなか太っ腹です。今後のサービス改善に期待です。

定性分析で利用する場合は、仮説立てや分析をしっかりしないと「こんな感じで見られてるんだ！ふ〜ん！」で終わってしまいそうなので、導入する目的や分析手順などは事前に練っておくと良いでしょう。
それでは！

仮説検証の手順についてはこちらも参考に ↓

関連記事【改善施策】企画立案の7ステップと考え方・進め方のコツ｜Webサービス/アプリ

2019.03.31

ユーザーインタビューやUX周りについては下記記事もチェックしてみてください↓

関連記事【THE GUILD勉強会レポ】ユーザーインタビュー設計ノウハウについて@DMM

2019.03.31

関連記事UXデザインとは？UXデザインの基本と注目される理由や背景を解説

2019.09.01

デザイナーってなんか憧れる！デザインを仕事にしたいけど、どうしたらいいんだろう……。

そういう悩みを持っている方って結構多いのかなと思います。デザインって義務教育で学んだこともないですし、何か特別な才能が必要な気がして、ハードルがとても高く感じますよね。

その気持ちめっちゃ分かります、僕も実際そうだったので。もともとデザインに興味があったし、デザイナーという職業にも憧れがありました。

僕は新卒でIT系企業に入社し、記事編集などの仕事を当初メインにしていたのですが、Webサービスの企画に関わっていくうちに、

「自分もデザインしてみたい！」

と次第に思い、社会人を続けつつ1年間デジタルハリウッドというデザイン・クリエイティブ系の専門学校に週2で通いました。現在はディレクターとして企画やマーケティング系の仕事をしながら、Webサービス・プロダクトのUI・UXデザインにも取り組んでいます。

結論から言えば、僕は学校に通って間違いなく良かったと思っていますが、学校によってはもう少しコスパ良く通えたな、というのが本音です。

デザインは独学で学ぶのはなかなか難しいし、デザインスクールに通うとなると時間も金もかかります。ですが最短でデザインの基礎を一通り学ぶのであれば、デザインスクールに通うことはおすすめの選択肢ではあります。

本記事ではデザインスクール・専門学校に通う意味やメリットは本当にあるのか、デメリットは何かあるのか、そういった疑問に僕の実体験を元に答えていきます。合わせておすすめのデザインスクールもご紹介していきますので、いま同じ悩みを抱えている方はぜひ参考にしていただけると嬉しいです！

参考までにおすすめなWebデザインスクールを知りたい方向けに、こちらに詳細をまとめています ↓↓
未経験向け！Webデザインでおすすめなスクール・専門学校＆講座比較まとめ

関連記事未経験向け！Webデザインのおすすめスクール・専門学校＆講座比較 7選まとめ

2023.09.30

実際にどんなことをWebデザインスクールで学んだの？

スクールでよく使っていた教室

僕が実際に1年間週2回（平日夜と土曜1日）のデザインスクールで学んだ内容は、主に下記になります。

今思えば、「どんだけ詰め込んでるねん……！」という感じですが、学んでみたいなぁと思ってたことは一通り学べた気がします。どこを深めていくかは自分次第な感じですね。

参考に当時の授業の様子が分かるレポートもご覧ください↓

関連記事【デジタルハリウッド授業体験記 #1】デジタルデザイン専攻_HTMLの基礎

2020.11.23

関連記事【デジタルハリウッド授業体験記 #2】デジタルデザイン専攻_デザインの潮流とUXD

2020.11.23

今見返すと結構恥ずかしいのですが……　授業で作成していた課題もよかったら参考にしてみてください↓
https://www.behance.net/hapihapihaec27

Webデザインスクール・専門学校に通うメリット

というこで、デザイン初心者がWebデザインスクールに通うメリットを、僕の実体験からリアルにお答えしていきます。

メリット1. 創る楽しさを学べた

まず個人的にデザインスクール通って一番よかったのは、「創ることの楽しさ」を学べたことですね。思い出した、とも言うべきかもしれません。

もともと絵を書いたり、何かを創ることは好きだったのですが、専門学校で自分の好きなこと・自分が創りたいものに自由に時間も気にせず没頭できたのは、仕事漬けな日々を送っていた僕にとってかなり新鮮な体験でした。1年にも渡ってじっくり何かを創る時間を取れたのは、これまでの人生で初めて。

仕事ともなると、色々な制約や納期などのプレッシャーがあるかと思いますが、学校では制作したいサービスやプロダクトを自分で全て決めてデザインできます。モチベーションも高まりますし、普通に楽しいんですよね。

また色々なスキルが徐々に身についていくと、「もっとこうしたい！」とか「これを学んでみたい！」というのがどんどん増えていきます。この状態って超幸せなことです！

「創るのが楽しい！」ということに気づき、学ぶ対象を具体的に描ければ、あとはその気持ちを原動力に独学でも何でもきっと自走していけますよ。その基礎力をスクールでは培えたかなと思っています。

メリット2. デザインに必要な知識を体系的に学べた

授業スケジュールの一部。

「デザインを学んでみたい！」という初心者の方にとっては、一体何をどの順番でどう学んだらいいのか、その全体像を掴むのことは結構ハードルが高いかと思います。

デザインスクールではデザインを学ぶために効率良いカリキュラムを練りに練っており、教材も最適化されたものが使われます（もちろん学校や担当する先生にもよりますが）。

独学だと色々な参考書を貪り、回り道をしがち。一方専門スクールに通うと必要なスキルに絞って学べ、効率よく最短でデザインスキルを身につけることができますよ。

またデザインの学び方やスキルを磨くステップについても、デザインの専門家から直接学ぶことができます。

そもそも何を学べばいいのか分からない、学び方も分からない・自信がない、という方はスクールに通う選択肢も考えて良いかとは思います。

メリット3. 分からなければすぐにフィードバックを貰える

スクールや専門学校に通っていれば、スキルのある先生から授業中はもちろん、チャットなどでも逐一フィードバックを貰えたりします。このフィードバックをしっかり活かすことが成長の鍵です。

デザインって、これが必ず正解！というのがなかなか見えにくいケースが多いです（サービスを実際に運用したり、ユーザーに見てもらったりしていく中で、どこをどう改善すべきかが徐々に見えきたりするのですが）。

自分でデザインしたポスターやWebサイトなどをどうすればもって良くできるのか、何か課題なのかを見定め自分で改善していくのは、正直デザインを始めたばかりの方に限らずかなり難しいのではないかなと思います。

ですので早く成長したければ、どんどん専門家のフィードバックを貰って自らの血肉にし、デザインを改善し仕上げていく過程を大量に経るべきかと思います。デザインスクールにはその機会が豊富にあるので、そのメリットを生かさない手はないです。

また卒業後もデザインについて先生に個別相談したりしていたので、個人的な繋がりをたくさんつくっておくこともおすすめします。

メリット4. レベルの高い同期からの刺激

卒業式の様子。一番左の調子乗っているのが僕です（笑）。

デザイン系のスクールに通っていると、自分と同じ授業を受けているはずなのに、圧倒的に自分よりもすごいクオリティのものをつくる奴がいるんですよね。

自分は割とセンスがあるのでは……と当初思っていたのですが（笑）、そういったレベルの高い同期の生徒を見ていると絶望感みたいものを感じます。高いアウトプットを出す人に限って、陰で寝る間も惜しんで勉強して創っては壊しを繰り返す圧倒的な努力をしています。

一人で独学していたら心が折れていたかもしれませんが、彼らのそういう姿勢をみると自分も頑張ろうと毎回奮い立てます。

またお互いにデザインのフィードバックをし合ったり、共同のプロジェクトで役割分担をして制作をしたりする機会もありました。同期とは卒業した今でも繋がりがあるのですが、各々デザイナーやエンジニアなどクリエイティブ系の仕事をしているので、未だに刺激を受けていますね。

メリット5. 強制的に学習・制作時間を練り出せた

デザインスクールの制作発表会

デザインスクールでは定期的に制作発表の場があります。3ヶ月課題や半年目の中間、卒業課題、その他毎週の課題など。

一人で独学していたら怠けてしまうことも多かったかもしれません。しかしこうした制作発表があるお陰で、それを目指して制作スケジュールを切り、着実に作品・ポートフォリオを創り続けることができました。

またアウトプットだけでなく、日々の学習という点においても毎週授業があるので必ず何かしらインプットがあります。授業についていくには復習や予習も必要になります。

人はどうしてもサボったり、易きに流れがちな生き物。自己コントロール力に自信のない方は、一定の強制力があるデザインスクールに通うことはおすすめな選択肢ですね。

メリット6. デザイン系のイベント・勉強会に参加できる

UXデザインのゼミ。カスタマージャーニーを描いてる様子。

これは通う学校にもよるかと思いますが、学校主催のデザイン・クリエイティブ関係のイベントや勉強会に招待されることもメリットです。ときには著名人や高スキル人材を招いたクローズドなイベントやセミナー、ワークショップも開催されたりします。

自分の関心ある領域を深めたり、広げたりする良い機会なのでぜひ参加するのがおすすめです。

またそうしたイベント情報に加えて、クリエイティブ系の就・転職案件やフリーランサー向けの案件情報なども紹介してくれたりします。デザインを学びポートフォリオを磨いたら、そのまま就職までサポートしてもらえることもスクール通いのメリットですね。

メリット7. デザイン系ツールの学割が使える

これも学校次第ですが、Adobeなどクリエイティブツールを学割で使えたのが地味にありがたかったです。普通に年間5〜6万円のツールが半額になったり、3D制作系のツールが無料になったり。

場合によっては学校にあるPCを使えばツールを購入する必要もありません。ただ自分のPCで作業したい場合はもちろん購入は必須ですが。

どのツールに学割が適応されるのかは、通う予定の学校に確認してみてください。

Webデザインスクール・専門学校に通うデメリット

続いて、Webデザインスクールに通うとどんなデメリットがあるのかも合わせてみていきましょう。

デメリット1. シンプルに授業料が高い……

個人的にこれがデザインスクールに通う最大のネックなのかなと思います。僕は1年間、週2回の授業料で年間120万円、制作に必要なツールや通学費用なども含めると＋10万円くらいはかかっています。

授業料については学校やカリキュラム、通学期間にもよるので、例えば半年間で週1とかのプログラムならもっと安くできますね。最近ではオンライン形式の学校や、1ヶ月など短期集中のプログラムもあります。

また分割払いにも対応している学校が多いかと思います。僕もスクールに通い出したのが社会人2年目とかだったので、確か3年払いくらいにしましたが、毎月数万円ずつ飛ぶのは結構痛かったですね。

ただデザインスクールではめちゃくちゃいい経験ができたので、その費用に見合うリターンは得られたかなとは思います。ですがそこは全て自分次第。自分の行動によって安くも高くもなります。

デザインを仕事にしたい！デザイナーに何がなんでもなりたい！という方にとっては、それを叶えるチケットになることを考えると安いものなのかもしれませんが。

もちろん「一括で余裕！」なんて方は無視してOKです（笑）。

デメリット2. 社会人だと超ハード！時間的な拘束も

僕は社会人をしながらデザインスクールに1年間通いました。正直に言うと、仕事しつつデザインスクールに平日夜に1日、土日まる1日通うことは、なかなかにキツかったですね。

最初同期も40人くらいいたのですが、1年後に最終的に残ったのは15人くらいでしたね（汗）。

授業についていくためも、学んだことを血肉にするためにも、授業の予習や復習をすることは必須です。加えて授業課題や制作発表に向けての作品・ポートフォリオづくりの時間を捻出する必要があります。

本気で学びたいのであれば、仕事が終わりに1〜3時間は捻出しつつ、休日1日は予習・復習、制作時間などに当てるべきかなとは思います。制作が佳境に入ると、時には有給を使ったりもしました。

ただし時間的な拘束があるからこそ、集中して取り組めるという面もあります。時間が余っていてもどうせやらないのであれば、半年〜1年くらい必死こく時期があっても良いかなとは思いますね。

デメリット3. スクールに通えばデザインができるようになる、ハズがない！

デザイン専門学校に通ったからといって、デザインができるようになるとは限りません。

受け身で授業だけと聞いているようだと、なかなかスキルを身につけるのは難しいです。予備校を使い倒す意識が必須です。

積極的にフィードバックをもらいにいったり、予習復習を徹底したり、勉強会に参加したり、参考書を読んだりと、自分でもスキルや知識を深める努力をする必要があります。制作物についても、課題はもちろんプラスαで自分で制作する姿勢も求められるかなと思います。

またデザインスクールで学んだことをそのまま実務で活かせるかというと、それもまた別問題。

もしデザイナーになりたいのであれば、デザインスクールでマインドや基礎スキルを培い、ポートフォリオを磨いた後、現場に滑り込み、地道に実務レベルまで引き上げる更なる努力をする必要があります。

デメリット4.　学ぶスキルが広く浅くになりがち

デザインスクールでは、たった数ヶ月や1年間でWebデザインに必要なスキルをカリキュラムにみっちり詰め込んできます。

授業内容はデザインの基礎から、制作ツールの使い方、HTMLやJSなどサイト制作に必要な言語などなど広範囲に渡ります。僕の場合はそこにUI・UX周りや動画制作、IoTなどのインタラクション、Unity、動画制作など、これでもかというくらい色々なことに触れました。

そうなると、まぁ普通に全てを学び取るのは無理なんですよね（笑）。

カリキュラムも割と導入部分や触りだけ学んで、次！みたいなことも多かったです。

自分が予期していなかったデザイン・技術などに触れることは、それはそれでメリットではあり楽しいのですが、どうしても1つ1つの知識やスキルが浅くなりがちです。人によっては不必要な授業も時にあるでしょう。僕はいろいろ学びたかったのでOKでしたが。

ですので自分はデザインのどの領域を攻めたいのか、どこを深めたいのか、どういうデザイナーになりたいのかを、スクールに通う前はもちろん、通いながらもしっかり考え抜き、学ぶ領域の取捨選択をする必要があるのかなと思います。

これは自分にとって重要ではないからとにかく楽しむ、この領域は深める必要があるから自分で徹底的に勉強するなど、力の入れ方を調整できるといいですね。全部頑張ろうとするとパンクしますよ。僕の場合はIoTやUnity周りはほどほどに切り捨てましたね……。

デメリット5. 教師によって当たり外れがある

これはスクールにもよりますし、運の要素もありますが、教師によって当たり外れは間違いなくありますね。

スキルの低い人や教えるのが下手な先生にあたる可能性を極力排除するために、講師陣のチェックは事前にしておくことをおすすめします。担当教師のブログや制作物、過去の経歴や実績を調べるなど。

といってもずっと同じ人が教えるというよりは、デザインの分野やクラスごとに先生が変わるケースも多いです。この先生良いな！という方を見つけたら、たとえ自分の授業を受け持っていなくても、積極的にフィードバックをもらいにいくなど能動的に良い先生を捕まえて活用する努力も必要です。

おすすめなデザインスクール・専門学校

上記のメリットやデメリットも踏まえて、それでもデザインスクールに通いたい！！という方はぜひ下記の学校をおすすめします。Webデザインを本気で学びたい人はぜひ参考にして下さい。

1. デジタルハリウッド STUDIO by LIG

Photo by：LIG公式サイト

「デジタルハリウッド STUDIO by LIG」は、Web制作やオウンドメディア運営で有名な株式会社LIGが運営するWebデザインスクール。クリエイティブ教育に強い僕の母校デジハリとタッグを組んでいるので、教材の質は間違いないです。

「Webデザイナー専攻」では「Photoshop」「Illustrator」を使ってWebデザインの基礎スキルを学んび、HTMLやCSS、JavaScriptでのコーディングを学んでいきます。またデザイン時に重要なライティングや編集、撮影についてもオリジナル教材で学べます。

受講期間は6ヶ月なので長すぎず、Webデザイナーとしてスタートラインに立つために、必要十分なスキルに絞って学ぶことができるので効率も良し。価格も45万円とデジハリと比較してもかなりコスパ良いです。

授業スタイルは、映像教材を使用したオンライン授業と、個別指導を併用した学習スタイルを採用しています。LIGに勤めている現役クリエイターからマンツーマンで直接学べるのは最大のメリットですね。LIGの社員の方とは仕事でも繋がりがあるのですが、遊び心のある面白い人が多いですし、個々のスキルも高いです。

他に特典としては、

などがあります。

仕事で実践しないとデザイン力はつかないので、半年きっちり学んでポートフォリオを創り転職活動するのはおすすめですね。僕の知り合いもこのスクールに通って、現在はIT系の企業でデザイナーをしつつ、フリーランスとしても活躍していますね。

僕がもう一度Webデザインスクールに通うとしたら、このデジタルハリウッド STUDIO by LIGに通うかなーと思いますね。

コース名	Webデザイナー専攻
受講料	¥450,000 (税抜)
受講期間	6ヶ月
場所	STUDIO上野 by LIG / STUDIO池袋 by LIG
公式サイト	キャリアチェンジを支援する・社会人のためのWebクリエイタースクール【デジタルハリウッド STUDIO by LIG】

\ 6ヶ月で未経験からWebデザイナーになるなら /

無料見学・説明会に参加する (公式サイト)

2. デジタルハリウッドスクール

Photo by：デジタルハリウッド公式サイト

クリエイティブ系の専門スクールといえば、このデジハリ。僕の母校ですね。

通っていた本科UI/UXD専攻コースでは、デザイン基礎に加えて、Illustrator・Photoshop、HTML5・CSS3などのコーディング、After Effects、インスタレーションやIoTデザイン、アプリやウェブのUI ・UXなどついて学びます。基本的に対面での授業がメインで、その他オンライン教材も併用します。

受講期間は1年間、週末1日＋平日夜1日の週2日、価格も120万（税抜）となかなかヘビー。時間を捻出でき、価格も懸念にならず、デザイン＋αでデジタルアートや動画制作など幅広く学びたければおすすめなスクールです。教材やサポートのクオリティも高いです。

ただし先程お伝えした通り、学ぶ内容を自分で取捨選択する必要があるので、人によっては無駄な時間やコストがかかってしまう感はありますね。

デジハリには他にも価格を抑えた半年コースやグラフィックデザイナー専攻、3DCGデザイナー専攻など、様々なコースがあるので、自分に合ったものを探してみると良いかなと思います。

\ 幅広くじっくりWebデザインを学ぶなら /

3. SHElikes（シーライクス） Webデザインコース

Photo by：SHElikes（シーライクス）公式サイト

SHElikes（シーライクス）は、未経験者向けかつ女性専用のWeb系キャリア支援スクール。スキルアップ支援やコミュニティ、コーチングなどを通じて、どう自分らしく生きるかを、ひとりひとりに寄り添いサポートしてくれます。提供コースは多数ありますが、一番人気なのがWebデザイン専門のコースです。

プランは2つで、全レッスン受け放題になる「受け放題プラン」と、月5回まで受講可能な「月5回プラン」があります。

受け放題プランはデザインのみならず、ライティングやマーケティング、動画制作など、全32コースからオンラインで受け放題なのでかなりお得なサービスです。

「デザインに興味があるけど、他にも色々学んでみたい！」という好奇心旺盛な方にはおすすめですね。

Webデザインからコーディングまで、サイト制作の基本的なスキルを学んでいく感じです。上記以外にも、外部講師を招いたイベントや勉強会が随時開催されています。

女性専用のスクールということもあり、独自のコミュニティが活発なので、他の参加者とも刺激を受けながら勉強・スキルアップしていける環境があるのが良いですね。またスキルをしっかり身につけられた方には、お仕事紹介のサポートもあります！

スクールやレッスン内容の詳細については、無料体験レッスンにて確認してみて下さい。体験レッスンに参加すると、初月の受講料が無料になるので要チェックです！

コース名	Webデザインコース
受講料	入会金148,000円 (税別) ＋受け放題プラン：月12,334円（税別）〜 / 月5回プラン：月8,167円 (税別) 〜
受講期間	1ヶ月 〜 最大12ヶ月 （※Webデザインコースは2ヶ月）
通学形態	オンライン＋お洒落な教室（表参道・銀座・名古屋）あり
公式サイト	SHElikes（シーライクス）公式サイト

\ 無料体験レッスン参加で初月無料！ /

SHElikes公式サイトを見る

オンラインスクールで学ぶという選択肢も！

デザインスクールに通うのが時間的にも物理的にも難しいなら、オンライン教材で学ぶという選択肢もあります。特におすすめなのは「
Udemy」というサービス。

Udemyは世界最大級のオンライン学習プラットフォームで、世界中の学びたい人と教えたい人をオンラインでつなぐサービスです。

Photo by：
Udemy公式サイト

Adobeのソフトなどウェブデザインはもちろん、データサイエンス、マーケティング、AIなどについても実践的なレベルで学べます。1講座あたりの価格は数千～数万円程度。ですので、必要な講座のみ受講すればコストも抑えることが可能です。講師に直接掲示板から質問ができるため自学自習もできます。

また専用アプリを使えばスマホから視聴も可能なので、自分のペースで学びたい方にはピッタリです。下記のようなデザイン関連の講座があるので、ぜひチェックしてみてくださいね。初心者・初学者向けの講座もあります。

ウェブデザインコース
グラフィックデザインコース（グラフィックデザインとイラストレーションを学ぼう！）
Web開発コース(HTML/CSS/JavaScriptなど)

時々セールもやっていて、通常￥24,000の人気コースが￥1,320（94%OFF）のときがあります！定期的にチェックしておきましょう！

デザインを仕事にしたいなら……

いかがでしたか？ここまでデザインスクールに通うメリットやデメリット、またおすすめなデザインスクールについてご紹介してきました。

デザイン初心者の方がデザインを仕事にしたいのであれば、それなりの時間を費やす覚悟が必要です。独学でも不可能では全くないですが、最短・効率よく学ぶのであればデザインスクールに通う選択肢もありかなと個人的には思います。

新しいことを学ぶのはとっても楽しいですし刺激的。覚悟といっても、デザインが本当に好きなら余裕で没頭できてしまうかと思います。
ぜひ勇気を出して、デザインにチャレンジしてみてくださいね！

おすすめなデザインスクール↓

・キャリアチェンジを支援する/社会人のためのWebクリエイタースクール【デジタルハリウッド STUDIO by LIG】

・女性専用のWeb系キャリア支援スクール【SHElikes（シーライクス）】

Webデザインスクールの詳細をもっと知りたい方はこちら ↓↓
未経験向け！Webデザインでおすすめなスクール・専門学校＆講座比較まとめ

関連記事未経験向け！Webデザインのおすすめスクール・専門学校＆講座比較 7選まとめ

2023.09.30

こんにちは！「Tekito style」を運営しているやすのり（@98nasi_nori）です。普段は都内でWebディレクター/マーケターなどをしています。

Webコンテンツやデザインを検討する際に写真素材は欠かせない要素。僕も日々の仕事はもちろん、ブログでも写真を使うことが多いのですが、良い感じの写真を探すのって結構時間がかかったりしますよね。

クオリティの高い写真を探している、そしてできれば無料がいいな……。

そんな方も多いかと思いますので、今回はおすすめなフリーの画像・写真サイトを13個まとめました。ぜひチェックしてしてみて下さいね。

※ 基本的に商用利用も可能ではありますが、利用前に必ず個別にライセンスを確認して下さい。

フリーの写真・画像サイト13選まとめ

それでは、おすすめなフリーの写真・画像サイトを1つ1つ紹介していきます。

1. Ordan

Photo by：http://o-dan.net/ja/

Ordanは世界中の無料写真サイトを横断し、クオリティの高い写真を一括検索できるサービス。2019年6月現在、32サイトから検索できます。日本語での検索も可能です。

個人のブログなどであれば、基本的にこのサイトだけでも十分目的の写真を探すことができますね。

また検索時に「商用利用可の無料写真素材のみ」をチェックすれば、商用利用可能な写真をソートして検索できるので便利。検索結果で表示された写真サイトのライセンスを個別に確認しておくとより安心かと思います。

Photo by：http://o-dan.net/ja/

こんな感じで複数のフリー写真サイトから検索することができます。個人的にかなりおすすめなサイトなので、写真を探している方はぜひ使ってみてはいかがでしょうか。

Odan

2. タダピク

Photo by：https://www.tadapic.com/

タダピクもOrdan同様、複数のフリー画像サイトを横断して一括検索できるサービスです。全43サイトから検索できます（2019年6月現在）。どちらかというと国内の写真サイトが多い印象です。また写真のみではなく、イラストやアイコンなども検索できますね。

商用利用可・クレジット表記不要の写真のみを対象としていますが、利用にあたっては個別の写真サイトの利用規約を確認しておきましょう。

タダピク

3. photoAC

Photo by：https://www.photo-ac.com/

写真ACは総会員数が400万人以上の、無料で写真素材を利用できるサービス。高品質で加工や商用利用も可能です。写真のバラエティや種類も多いので、写真を探しているなら必ずチェックしておきたいところ。

ダウンロードには簡単な会員登録が必要です。無料会員の場合は、1日の9点までダウンロード可能だったり検索回数などにも制限があります。ですが写真のクオリティも高く枚数も多いので、それでも十分に利用価値はあるでしょう。

有料のプレミアムプランではウンロード数が無制限、かつ写真の一括ダウンロードができます（一度には10枚まで）。価格は月額1,066円と爆安です（有料写真サイトは相場が月額1万以上とか普通に高いので……）。

僕も普段の業務でお世話になっている、かなりオトクなサービスかと思います。

ちなみにAIが生成した実在しない人物の顔写真を利用できたりします（まだベータ版）。

photoAC

4. Unsplash

Photo by：https://unsplash.com/

Unsplashは世界中のフォトグラファーが撮影した、美しい写真を無料で利用できるサービス。総写真枚数は85万枚以上で、毎日1,000枚近く新規で追加されています。

商用利用可能で、クレジット表記も不要。先程紹介したOrdanでも検索可能です。とても無料の写真とは思えないほどに、写真のクオリティは高く申し分ないですね。アイキャッチやデザイン性の高いサイトでも活用できそうです。

Unsplash
※ライセンス

5. Pexels

Photo by：https://www.pexels.com/

Pexelsは海外の無料ストックフォトサイト。Ordanでも検索可能です。こちらのサイトも写真のクオリティは高く、かなりおすすめですね。商用利用可能でクレジット表記も不要。画像の編集も可能です。

またPexelsではダウンロードする際に、

• Original (3840 x 5760)
• Large (1920 x 2880)
• Medium (1280 x 1920)
• Small (640 x 960)
• Custom Size

など画像のサイズも選べるのが便利なポイントですね（※ 指定できるサイズは画像により異なります）。

Pexels
※ライセンス

6. pixabay

Photo by：https://pixabay.com/ja/

pixabayは170万枚以上の画像を掲載している写真コミュニテイサイト。すべてフリーで商用利用可能、クレジット表記も不要、写真の改変も可能です。

また写真だけでなくイラストや動画も検索することができたり、人気またはアクティブな撮影者ごとにも写真を検索できます。
ユーザーリスト

どの写真もお洒落で日本語利用もでき、写真の検索が楽しくなりそうなサイトですね。

pixabay
※ライセンス

7. PhotoPin

Photo by：http://photopin.com/

PhotoPinはFlickrのAPIを活用し、Flickrに掲載されている画像からcreative commonsの許諾がある画像のみ検索するサービスです。商用利用できる写真のみソートし検索できます（Commercial欄にチェックを入れる）。

またPhotoPinに掲載されている画像については、クレジット表記を必ずつける必要があります。画像サイズを選択しダウンロードした後に、写真の下に表示されるソースコード（Grab HTML for Attribution欄）を貼り付けることで、簡単にコンテンツ内にクレジットを表記できますよ。

PhotoPin
About

8. Foodiesfeed

Photo by：https://www.foodiesfeed.com/

Foodiesfeedは「食」をテーマにしたフリー写真素材サイト。料理の画像を探していたときにたまたま見つけました。商用利用も可能です。

2019年6月現在、写真枚数は全部で1,300枚と少ないですが、1枚1枚のクオリティは高いので十分利用価値はあります。

コーヒー、ケーキ、ピザ、お肉など、食に関するカテゴリーからピンポイントで写真を検索できるので、食べ物の写真を探している方はぜひチェックしてみて下さいね。

※ たまにサーバーがダウンしていることがあるようなので、その場合は数分待機してから再度アクセスしてみましょう。

Foodiesfeed
ライセンス

9. Gratisography

Photo by：http://gratisography.com/

Gratisographyはクオリティの高い、ユニークでシュールな画像を掲載している少し風変わりな写真サイト。すべてフリーで商用利用も可能です。

写真枚数は600〜700枚ほどですが、他の写真サイトではあまり見かけないような写真が多いですね。ぱたくそのデザイン性を高くした海外版のような印象。

Gratisography
ライセンス

10. BURST

Photo by：https://burst.shopify.com/

BURSTはカナダ発のECプラットフォームであるShopifyが運営する無料のストックフォトサイト。すべて商用利用可能でクレジット表記も不要です。

カテゴリの種類が豊富、かつカテゴリの中からさらに細かく分類されているので、画像の検索がしやすいですね。画像の質・クオリティは高いので、ぜひチェックしておきたいサイトです。

BURST
ライセンス

11. FIND/47

Photo by：https://find47.jp/

FIND/47は日本の美しさを再発見し、広めていくために観光予報プラットフォーム推進協議会が運営している写真サイトです。47都道府県別に日本の四季折々の自然や文化、伝統など、美しい情景写真が多数掲載されています。写真が撮影された場所をGoogle Map上で確認することができるので、ついつい実際に行ってみたくなりますね。

写真はすべて無料で商用利用も可能ですが、クリエイティブ・コモンズ4.0のルールに基づいてクレジットを記載する必要があります。

FIND/47
ライセンス

12. Morguefile

Photo by：https://morguefile.com/

Morguefileは、35万枚以上の商用利用可能な写真を掲載しているストックフォトサイト。一部有料な（というか有料サイトへ飛ぶ）写真もありますが、基本的にはフリーで利用できます。

クオリティの高い写真も多いですが、素人の方が撮ったような味のある写真も見つかったりするので、そういう写真を探している方には逆に便利かも。ジャンルにもよりますが、スマフォで撮影したかと思われる縦長の写真が多かったりますね。

Morguefile
ライセンス

13. PAKUTASO（ぱくたそ）

Photo by：https://www.pakutaso.com/

PAKUTASO（ぱくたそ）は高品質・高解像度の写真をフリーで利用できる写真素材サイト。無料写真サイトとしてはかなり有名ですよね。

掲載枚数は約2万枚以上。ロイヤリティフリーなので、商用利用や写真の編集なども可能です。またS、M、Lと写真サイズを指定してダウンロードできますよ。ぱたくその写真は「これぱたくその写真かな……」となんとなく分かってしまうので、多用は控えた方がいいかもしれません。

PAKUTASO（ぱくたそ）
ライセンス

おまけ・有料でおすすめな写真・画像サイト

ここまで無料の写真サイトを紹介してきましたが、最後に有料の写真サイトも2つ紹介いたします。

Adobe Stock / fotolia

Photo by：https://stock.adobe.com/

Adobe Stockはadoveが運営している有料サイト。素材のクオリティも高いのですが、月40枚ダウンロードできて約1万円と価格は高めです。ロイヤリティフリーなのでもちろん商用利用も可能です。

Adobe Creative Cloudと連動し、Photoshop、IllustratorなどAdobe製品から素材の検索や管理ができます。

もともとfotoliaという有料写真サイトがあったのですが、2019年11月5日に閉鎖予定で、すべて「Adobe Stock」に移行予定です。fotoliaに掲載されていた写真や画像は、その大部分を引き続きAdobe Stock内で利用できます。

僕はfotoliaを数年ほど使っていたので、今後のAdobe Stockに期待。

Photo by：https://jp.fotolia.com/

https://stock.adobe.com/
https://jp.fotolia.com/

Shutterstock

Photo by：https://www.shutterstock.com/ja/

Shutterstockはクオリティ高く掲載数も豊富な有料写真サイト。画像や動画クリップなど合わせると、2億7,000万点以上の掲載数を誇ります。

写真だけでなく、イラストのクオリティもかなり高いですね。すべてロイヤリティフリーなので、商用利用できますよ。価格は月に50点までダウンロードできるプランで＄99。

有料サイトを使うなら選択肢に入れておくべきサービスです。

Shutterstock

まとめ

いかがでしたか？今回はブログなどコンテンツ制作でおすすめなフリーの画像・写真サイトを13個まとめました。

今回紹介したサイトは基本的に商用利用も可能ではあります。ですが利用前にご自身でもライセンスを必ず確認し、必要であればクレジットを適切に掲載してから利用しましょうね。

写真編集でおすすめなツールもぜひ合わせてチェックしておきましょう ↓↓

関連記事これで十分！かんたんに画像加工・編集できる無料ツール厳選5選まとめ

2020.11.23

Webデザインを効率的に学ぶなら、スクールに通うのもおすすめな選択肢です ↓↓
未経験向け！Webデザインでおすすめなスクール・専門学校＆講座比較 7選まとめ

関連記事未経験向け！Webデザインのおすすめスクール・専門学校＆講座比較 7選まとめ

2023.09.30

こんにちは！「Tekito style」を運営しているやすのり（@98nasi_nori）です。普段は都内でWebディレクター/マーケターなどをしています。

デザイナーやフロントエンジニア、ディレクターなど、サービスやプロダクト開発に関わっている方であれば、UXやデザイン関連の最新情報は常に抑えておきたいですよね？他社事例の情報などもぜひウォッチしていきたいところ。

そこで今回は、最新のデザイン情報や役立つチップスを発信している、おすすめな企業・個人ブログを15つまとめました。日々の情報収集に役立ててみて下さいませ。

企業ブログ・オウンドメディア11編

まず制作会社やデザイン会社、または事業会社のデザイン部が運営している、企業ブログ・オウンドメディアをご紹介いたします。

1. Goodpatch Blog

Photo by : Goodpatch Blog

デザインといえば真っ先に思い浮かぶであろう、株式会社グッドパッチさんが運営しているメディア。「デザインの力を証明する」をミッションにUI/UX領域に特化しているデザイン会社で、ベルリンや台北にもオフィスがあるようです。

UX領域からプロジェクトマネジメントの他、毎月Goodpatch内で話題になったサービスやデザインの情報なども発信していて、最前線で働くデザイナーの知見や考え方を覗ける貴重な情報源となっています。記事の質も更新頻度も高いです！

僕は勝手にGoodpatchファンなので、日々の更新を楽しみにしています！

URL：Goodpatch Blog

2. freshtrax

Photo by : freshtrax

サンフランシスコに拠点があるクリエイティブカンパニー、btraxが運営している企業ブログ。デザインやイノベーションなどに関する最新情報を発信しています。UXやデザインシンキングなどのデザイン関連、またAIやIoTについてなど専門的な情報もまとまっており、記事のクオリティはかなり高いですね。定期的にチェックしておくべき、おすすめのデザインブログです！

URL：freshtrax

3. Mercari Design

Photo by : Mercari Design

「Mercari Design」は、メルカリとメルペイが発信している公式ブログです。クリエイティブやデザイン関連の情報を不定期で発信しています。

更新頻度はあまり高くないのですが、今最も勢いに乗っているスタートアップであるメルカリ所属のデザイナーやクリエイターの情報を見れるので、時々チェックしてみて下さいね。

URL：Mercari Design

4. DeNA DESIGN BLOG

Photo by : DeNA DESIGN BLOG

「DeNA DESIGN BLOG」は、DeNAのデザイン本部が発信しているブログです。UXやデザイン情報だけでなく、フロントエンドエンジニアリング関連の情報も多数掲載されています。またデザインや技術系のカンファレンスやイベントレポートなども参考になりますよ。更新は月数本など不定期なので、たまにチェックしておくことをおすすめします。

URL：DeNA DESIGN BLOG

5. CrowdWorks DESIGNER BLOG

Photo by : CrowdWorks DESIGNER BLOG

「CrowdWorks DESIGNER BLOG」は、クラウドソーシング最大手クラウドワークス所属のデザイナーさんが発信しているブログ。UXからUI設計、組織論までしっかりまとめてくれている記事が多く、とても参考になります。更新も毎月定期的にされているようです！

URL：CrowdWorks DESIGNER BLOG

6. CyberAgent Developers Blog

Photo by : CyberAgent Developers Blog

「CyberAgent Developers Blog」は、サイバーエージェントに所属するエンジニアやクリエイター、PMなどの方が情報発信しているブログです。Abema TVやAWAなどの人気サービス開発の裏側を少し覗くことができます。更新頻度は多かったり少なかったりとばらつきがある感じですね。

URL：CyberAgent Developers Blog

7. RECRUIT TECHNOLOGIES Member’s Blog

Photo by : RECRUIT TECHNOLOGIES Member’s Blog

リクルートの開発部隊、リクルートテクノロジー社所属のクリエイターの方が発信しているブログです。デザインやフロント開発領域の記事も更新されていますが、どちらかというとエンジニアの方向けな情報が多いサイトです。リクルートのような大規模サービス開発を運営しているクリエイターの考え方や知見を学べます。更新も定期的にされていますよ。

URL：RECRUIT TECHNOLOGIES Member’s Blog

8. PSYENCE:MEDIA

Photo by :

こちらはリクルートの子会社、リクルートマーケティングパートナーズに所属するデザイナーやエンジニア、スクラムマスターなどが発信するメディアです。こちらもどちらかといえば技術系の記事が多いですが、プロトタイピングやフロント開発、インタラクションデザインについてなど、興味深いコンテンツが多数あります。ぜひチェックしてみて下さいね。

URL：PSYENCE:MEDIA

9. OHAKO Blog

Photo by : OHAKO

東京を拠点に活動しているデザインカンパニー、「OHAKO」が運営しているブログです。デザインやプロダクトマネジメントなどに関しての情報を発信しています。記事の数はまだ多くはないのですが、時々チェックしてみてはいかがでしょうか。

URL：OHAKO Blog

10. LIG BLOG

Photo by : LIG BLOG

もはや説明不要かと思いますが、制作会社LIGが運営するブログです。デザインだけでなく、コンテンツ制作や開発周りのテーマも多くかなり参考になります。記事テーマの切り口が面白い記事が多いですね。最近はデザインや技術などに関係ないテーマも増えてきていて、見る機会は以前と比較して減った気がしますが、それでも要チェックなメディアであること間違いなしです！

URL：LIG BLOG

11. UX MILK

Photo by : UX MILK

UX MILKは、株式会社メンバーズが運営するUXデザインに特化したメディアです。記事テーマをUXに絞っているので、UX領域に関して広範囲かつ深ぼった記事も多く、海外の著名デザイナーの翻訳記事なども掲載されています。UXについての情報収集するなら必ず抑えておきたいメディアですね。

URL：UX MILK

個人デザインブログ編4選

ここからは個人で運営されているデザインブログを4つまとめて紹介いたします。

12. サルワカ

Photo by : サルワカ

サルワカはあらゆることを分かりやすく解説するをコンセプトにしたメディアで、Web制作やデザイン関連情報を発信しています。@catnose99さんが個人で運営しています。

最近検索でもよくヒットしますね。コンセプト通り、ひとつひとつの記事のクオリティがかなり高く、とても分かりやすいです。主に初心者向けのコンテンツが多いのですが、つまずかないようにかなり細かく情報を整理しています。コンテンツ制作の観点でも参考になることが多いです。個人でここまでのメディアをつくれるのは相当すごいですね……。

URL：サルワカ

13. coliss

Photo by : coliss

colissさんについては説明不要かと思いますが、サイト制作に関する最新情報を日々発信しているメディアです。デザイン関連も記事も豊富で一つひとつの記事のクオリティも高いです。ぜひ定期的にチェックしておきましょう！

URL：coliss

14. tsubotax.com

Photo by : tsubotax.com

デザイン会社Basecamp代表、Onedot株式会社のCCOを勤めているデザイナーの坪田 朋さんが運営しているブログです。デザイン領域の先駆者として活躍されている坪田さんのデザインに対する考え方を垣間見ることができます。かなり面白く勉強になります。更新は不定期ですが、要ウォッチですね！

URL：tsubotax.com

15. UX INSPIRATION!

Photo by : UX INSPIRATION!

UXデザイナーのHiroki Hosaka（保坂 浩紀）さんが運営する個人ブログ。デザインやUXに関するクリエイティブネタを発信しています。更新は昨年2018年あたりで止まっているのが残念なのですが、UXやデザイン対する考察が参考になるので、過去記事を発掘してみてくださいね。

URL：UX INSPIRATION!

まとめ

ここまでデザイン情報収集に役立つ企業・個人のブログメディアを15つご紹介していきました。

ぜひ定期的にチェックしてみて、効率的に情報収集していただければと思います。他にも追加するべきサイトなどありましたら、ぜひお声がけ下さいませ。

それでは！

Webデザインを効率的に学ぶなら、スクールに通うのもおすすめな選択肢です ↓↓
未経験向け！Webデザインでおすすめなスクール・専門学校＆講座比較 7選まとめ

関連記事未経験向け！Webデザインのおすすめスクール・専門学校＆講座比較 7選まとめ

2023.09.30

関連記事Webデザインスクール・専門学校に通うメリット・デメリットを経験者が比較してみた

2023.09.30

Webマーケティングでおすすめなメディア一覧はこちら ↓↓

関連記事Webマーケティングの情報収集におすすめなメディア・ブログ20選まとめ

2020.06.21