Webディレクターでいこう

フリーランスWebディレクターのアレコレを書いていきます

運用設計を要件定義に盛り込んでムダのないサイト設計をしよう

f:id:sala1107:20170515032246j:plain

 こんにちは。川上サラ(@sala709)です。先日、皮膚科の先生より「皮膚オタクで腕が非常によい先生ですよ♪」と、あるクリニックをご紹介いただきました。そして、期待に胸をふくらませてサイトから予約を入れたのですが、よく見るとサイトの『時が止まっている』箇所が散見されました。つまり、『コンテンツは準備したけど更新がされていない』という箇所です。

 

更新されていない箇所(2017年5月現在)

 

  • クリニックのお知らせ「2011年7月『サイトリニューアルしました』のみ。
  • もう1件は「テストテスト」。2011年からこのままらしい。
  •  掲示板→リンク切れ
  • ブログ→半年に1度程度の更新、2013年を最後に更新なし
  • Facebook→投稿ゼロ

 

皆さまも「更新されていないコンテンツがあるサイト」に遭遇したことありませんか?

 なぜこのようなことが起こるのでしょう?

 

私の経験では、このような現象はWebプロデューサー、ディレクターがクライアントの運用を考慮せず、自分たちが「良かれ」と思ったコンテンツをクライアントの理解を得ぬまま盛り込んだ場合に発生するケースが多いと思います。

 

確かに「お知らせ」「SNS」「掲示板(今は古いですね)」は適切に運用がされていれば、ユーザーにとってもメリットがあるため、クリニックにとっても広告効果が発生したと推測されます。しかし、適切に運用されなかった結果、せっかく制作したのに使用されず、クライアントからは忘れ去られ、ユーザーによくない印象を与える結果となってしまいました。

 

では、運用設計とは何でしょうか?

 

運用設計とは?

qiita.com

運用設計は、サイトの新規リリース・リニューアルなどのリリース後の運用がどのように行われるのか?という設計です。せっかく高い費用をかけてサイトを制作しても、それが適切に運用されなければ効果は出ません。web制作者ならやっぱり成果の出るサイトにしたいものです。それには運用設計が非常に重要なのです。

 

運用設計で考慮したい点

では、Web制作者としてどのようなことを運用設計に盛り込むのが良いでしょうか。私の場合は最低限、以下の内容をクライアントに確認しています。

 

  • 誰が更新するか?(クライアント担当者?Web制作者?)
  • 日常的に更新するものは?(『お知らせ』、SNSなど)
  • 更新頻度は?(週1回、月1回、ほぼ更新しない)
  • 開発保守費、更新費の予算は?
  • リニューアルなら、現在、管理している制作会社と開発会社は?

 

なお、上記は運用設計のみです。サイトコンセプトなど、初期に確認しておくべき要素は他にも多数存在しますが、今回は運用設計のみの話なので、これだけに絞っています(もちろん案件によって確認事項も変わります)。

 

いくら『一般的には良い』施策であっても、クライアント側で適切に運用ができない場合は要件から外すのが最終的にはクライアントのためなのです。

 

運用コスト(ランニングコスト)は抑える設計にしましょう

新規やリニューアルでの要件定義、概要設計が甘い案件の場合、終盤に差し掛かると、後から考慮漏れが多数発生して、苦し紛れに「それは運用でカバーしましょう。」と逃げるディレクターやSEがいます。気持ちは分かります。

 

しかし、「運用でカバー」は運用コスト(ランニングコスト)がかかるケースが多いですね。しかし、運用コストを抑えるべく、最初の段階でキチンと設計しておいた方が長い目でみると全体のコストが抑えることができます。

 

そうするためには、要件定義と概要設計を詰めておくことです。要件定義を詰めるときに、運用設計の要件が必要になってくるんですね。要件定義と概要設計はディレクターとSEの腕の見せ所です。

 

『要件漏れは発生するもの』と開き直る人もいますが、経験を積むほど後工程の要件漏れはなくなるものです。

 

企業でSNS運用を行うには

無料で作成できるということもあり、何も考えぬままつい「Facebookページ作ろう」「Twitterやろう」「インスタのアカウント作ろう」と提案をしてしまう人がいます。

しかし、SNSを運用するなら最低限、以下の内容は決めておきましょう。

SNS運用で決めておきたいこと

 

  • 誰が、誰に
  • どういう目的で
  • どういうテンションで(トンマナも)
  • どういう内容を
  • どれくらいの更新頻度で
  • 品質管理の基準は?
  • 文章のトンマナ

 

上記のことが決まらない限りはサイトに導線はつけない方が良いでしょう。企業アカウントはサイト同様に企業の顔となります。それが適切に運用されていないとなれば、社会的評判もそのようにみられてしまいます。

 

まとめ

いかがでしたか?この記事で『運用設計』という言葉をはじめて聞いた人もいるかもしれません。しかし、サイトはリリースされてからが勝負です。リリース後の運用が決めていないがために運用コストが高額になったり、人的ミスを誘発するような複雑なフローになってしまったり、というようなことがないように、しっかり要件定義に盛り込んでいきましょう。

仕事がデキる人は返信が早い。コミュニケーションコストを下げて円滑に仕事をするには?

f:id:sala1107:20170413153941j:plain

こんにちは。川上サラ(@sala709)です。ディレクターという仕事に限らずですが、仕事をしていると、すぐに返事が来る人とそうでない人では、仕事がスムーズに進むかどうかにも差が出るなー、と考えたことありませんか?

 

そこで、円滑に進行するために、返事をすぐに出すように促しても『5分程度だからやってよ』と言われてしまうこともあります。

 

そして、挙句の果てには

また○○さんから催促が来ちゃってさー(こわーい)

と勝手に怖い人認定されたことありませんか?

 

私はあります!

今回はそんなモヤモヤを書いていきたいと思います。

 

仕事がデキる人は返信が早い

人心掌握術の鉄人、元内閣総理大臣である田中角栄氏はこのように述べています。

ビジネスの自己啓発の本やコラムにはよく「仕事がデキる人は返事が早い」といわれていますが、これは私の実体験からも非常に納得のいくものです。

業務連絡をメールやチャットで行ったとしても相手からの返信がない場合は、送信した側はとても不安になります。返信が到着していないか何度も確認しなければなりませんし、何より仕事が停滞するリスクもあります。業務連絡がきた場合はまず返信することが大切です。

返信をしない・遅いというだけで、他者にコミュニケーションコストをかけさせていることになります。

president.jp

コミュニケーションコストとは?

コミュニケーションコストとは、相手とのコミュニケーションにかかるコストを言います。

 

事例)Bさんの場合

A「Bさん、○○ページの更新をお願いします。指示書は送りました。不明点ありましたら遠慮なく質問してください。」

B「指示書の内容を確認しました。問題ないので着手します。」

(数日後)

B「完了したので送ります。」

A「ありがとうございました。」

 

事例)Cさんの場合

A「Cさん、○○ページの更新をお願いします。指示書は送りました。不明点ありましたら遠慮なく質問してください。」

C(返事なし)

A「指示書は見ていただけましたか?」

C「あ、はい。見ましたけど...。分かりました。」

A「質問ありましたら都度お声かけください。」

(数日後)

A「Cさん、できましたか?」

C「やってみたのですが、実は分からないことがあったので、できていません。」

A「不明点あったら、その都度質問してくださいとお願いしていたと思いますが...。どこが分からないのですか?」

C「この部分をどうしたらよいか分からなくて...」

A「その内容は社内のスタートアップ用資料に記載ありましたよ。それに、分からないことがあったら私やBさんに質問してもよかったですね。今後はそのように対応してください。」

C「わかりました。」

A「いつ頃できそうですか?」

C「やってみないとわかりません。」

A「では、今日の夕方にまた進捗の確認します。その時の状況を報告してください。」

 

同じことを伝えるにも、その相手に対してどれだけの労力がかかるのかをコミュニケーションコストといいます。上記の2例では、Bさんはコミュニケーションコストが低、Cさんが高です。

返信が遅い(ない)人は、周囲にコミュニケーションコストをかけている

ビジネスにおいては交渉事や連絡事項が多く発生します。その中で、返事が遅い・しないという状況は、送信側からはどういう状況がわかりません。

そのため、送信者は「相手は読んだか?」「いつ返事が来るのか?」を気にしつづけなければならない状態となります。

この「返事はまだか?」と何度もメールやチャットを気にしている状態は、コミュニケーションコストがかかっている状態です。

 

サービスとしての成果物は同じであっても、このコミュニケーションコストが高い人と低い人とでは、そこまでに至る工数に雲泥の差が出ます。Webの世界は工数計算が一般的ですから、このようなことでも工数が跳ね上がります。

 

「たった5分」ではない。他人に回答の催促をさせることは全体の生産性を大きく下げている

以前、勤務していた会社には業務連絡のメールに返信をしない人が数人おりました。期日になるとディレクターや関係者から催促の連絡が入るので、それを目安に仕事をしていたようです。

 

 声をかけると「見落としてた」「言おうと思ってたけど状況が変わった」などと言われることもしばしば。スケジュールを引き直して関係者に連絡するなどの再調整を行うこともありました。

 

このタイプはタスク管理ができない人です。しかしタスク管理ができていない自覚もなく『自分の仕事を他人にフォローさせる=自分の仕事の最適化』と思っているフシもあり、本人に指摘しても上司に報告しても、まったく改善する様子はありません

仕方がないので、朝・夕に進捗確認をしてカバーするしかなく、もちろんコミュニケーションコストは極めて高いです。 

 

一方で、自分の業務のタスクを適切に管理できる人もおります。

業務連絡のメール返信はもちろんのこと、適切に報・連・相ができる、どの会社でも戦力になるような頼りがいのある仕事ができるタイプは、タスク管理もおのずとできるものなのです。

 

コミュニケーションコスト高と低の人では、同じ期間での成果物の生産量には大きく差が出ます。もちろん、コミュニケーションコスト低の人と一緒に仕事をした方が、量が多くも質も良いものを制作することができました。

 

「今日が期日です」といった連絡事項を出すことも工数がかかります。

タスク管理ができていない人ほど、進捗確認の連絡を軽視しており、自分でもタスク管理をするように促しても「それくらいの連絡は5分もかからないだろう」と主張して改善しません。

 

しかし、進捗確認の連絡をする前にはさまざまな確認作業をしています。メールや連絡を見落としていないか、関係者が伝言を預かってないか、病欠等で休んでいないか、何か理由があって返事がないのか...など。

様々なことを想定しながら確認作業を行いますし、問い合わせのメール(チャット・タスク管理ツール)を打つだけでなく、さらに返事を受領して内容を確認して、また返信する...という作業もありますから5分程度では収まりません。

 

このような作業が1日に何件もあったらどうでしょう。

1日5件リマインド連絡を送り、それが毎日だったら?

1回の連絡を10分で計算するとこうです。

 

10(分)x5(件)x20(日/1ヶ月の営業日)=1000分(約17時間)

 

本人は「たった5分」を奪ったつもりでも、塵も積もれば山となり、1ヶ月にすると17時間も奪っています。これだけの時間があったら、例えばサイト調査やリファレンスを充実させるなど他にいろいろなことができます。

 

タスク管理できない人の進捗確認の連絡をする時間に費やすよりも、生産的なことに時間を費やす方がよほど有意義です。

 

このように、コミュニケーションコストを安易に考えている人ほど、周囲にコストをかけ続けて全体の生産性を下げています。仕事がデキる人は返信しないことのリスクを知っていますから、悪い返事ほどすぐに返事をする習慣がついているのです。

 

しかし、返信の内容に時間がかかるものや返事がしにくい場合もありますね。その場合はどうすれば良いでしょうか?

仕事がデキる人の連絡術

仕事がデキる人の連絡術1:連絡を受領したことを回答する

連絡内容にすぐ回答ができれば良いのですが内容によっては回答に時間がかかるものもあります。その場合は理由も添えて「○日までに回答します」と返信しましょう。

それだけでも、いつ連絡がくるのか目安が分かるので円滑に進みやすくなります。

仕事がデキる人の連絡術2:理由を考えるより返信を早めることに集中する

言いにくいことほど、角の立たない言い回しはないものかと色々と考えてしまいます。しかし、そういう時は結論だけ伝えておき、理由は対面(または電話で)お伝えする、とするのもひとつの方法です。対面の方が声のトーンなどで悪気がないことも伝わりやすいので、テクニックとして覚えておくのも良いでしょう。

 

また、ビジネスメールの書き方の指南本はたくさんありますので、それを参考に言い回しを自分の中でいくつか準備してもいいですね。

デキる人は返事が早い。これはメールでもチャットでも変わりません。

 

できる大人のモノの言い方大全

できる大人のモノの言い方大全

まとめ

今回は「返信」を通じてコミュニケーションコストについて書きましたが、コミュニケーションコストが下がる要因は他にも「その内容についての知識が足りない」「相手の意図を汲むのが苦手」などさまざまな要因があります。

しかし、最初からうまくできる人はいません。特に初めて一緒に仕事をするような関係性なら分からなくて当然です。よくコミュニケーションを取って双方の理解を深めることが大切です。

 

とはいえ、すぐに返信するのは誰でも簡単にできることですね。もし心当たりのある人は取り入れてみると良いでしょう。返信が早い方が誠実な人柄であることが伝わりやすいですし、今までそうしていなかった人は返信を早めることで仕事が円滑に進むことを実感できるようになるはずです。

ディレクターなら読んでおきたいオススメ本

f:id:sala1107:20170331012820j:plain

ディレクターに求められる知見の範囲は広いですし、会社によっても請け負う作業内容が違うせいか、Webディレクターの指南本は内容にバラつきがあるように思います。

そんな中、10年以上ディレクターを勤める私からすべての工程をバランス良く網羅されていると思ったディレクターのオススメ本を紹介します。 

 

 

 Webディレクションの新・標準ルール 現場の効率をアップする最新ワークフローとマネジメント

発行年:2017年

一部、抜粋です。

属人化の回避とマニュアル作成

  • マニュアル化してブラックボックスを避ける~運用プロセスが属人化することの弊害
  • 業務を具体的な手順化する
  • 更新マニュアルを作る

(参照元:Webディレクションの新・標準ルール 現場の効率をアップする最新ワークフローとマネジメント)

 

現場のプロが教えるWebディレクションの最新常識 知らないと困るWebデザインの新ルール2

現場のプロが教えるWebディレクションの最新常識 知らないと困るWebデザインの新ルール2

現場のプロが教えるWebディレクションの最新常識 知らないと困るWebデザインの新ルール2

 

 発行年:2014年

一部、抜粋です。

 クライアントとの契約のあり方を見直す

(参照元: 現場のプロが教えるWebディレクションの最新常識 知らないと困るWebデザインの新ルール2)

 

この2冊はすべての工程をバランス良く、初心者にも分かりやすく解説されています。これだけの重要な知見をよくこの文章量でまとめ上げられていると唸りながら拝読しました。基本的なことから、業務をうまく回すための実務的なコツまで丁寧に書かれています。

 

ディレクターは制作だけ行う仕事ではありません。属人化の問題や、クライアントとの契約(=請求書と責任分界点に関わる)など、全体を俯瞰して考えなければならない部分が多々あります。それは直接お金にならないようではあるものの、全体の成果物の品質に関わったり、マネジメントに大きく影響を及ぼす部分です。

 

これらの明文化はなかなか難しいものですが、この2冊の著書では、そういった陥りやすい罠の回避方法を提示してあります。 

 

これだけ充実した内容が1冊2400円程度ですから非常にお買い得です。わざわざワークショップやサロン系セミナーに通わずとも、数時間で得られるものがとても大きいのは間違いありません。

 

ディレクターとして経験ある人であっても「そうそう、そうなんだよ~(わかる~)。」というテンションで一気に読み終えることができるお勧め本です。

 

 プロジェクトマネジメント標準 PMBOK入門 PMBOK第5版対応版

プロジェクトマネジメント標準 PMBOK入門 PMBOK第5版対応版

プロジェクトマネジメント標準 PMBOK入門 PMBOK第5版対応版

 

 大手企業サイトならステークホルダーも多いと思われます。PMBOK(Project Management Body of Knowledge)の基本を知っておけば、プロジェクトが停滞した時、どこに原因があるか特定しやすくなります。PMBOKも数多く書籍が出ておりますが、私はこれが一番ハードルが低くて読みやすいと思いました。

 

大手企業の新規事業プロジェクトになるとSIerさんとも足並みをそろえて業務を進めることがあります。そんなとき、PIMBOKの知見は大いに役立つものであるといえるでしょう。

まとめ

ディレクターという職種は多くの人と関わる職種です。立場によって利害関係が異なりますから当然、主張も異なりますし、予算とスケジュール、担当者のスキルによっても状況が変わりますから、折り合いが難しい場合もよくあります。

 

そうなると、感情的に物を言う人が出て来ることもあり頭を悩ませてしまいますが、そんなときは、何を正としたら良いかという指標が必要です。

 意見の相違が発生した場合、あらかじめ「なぜそれが必要なのか?」を論理的に理解しておけば、いざという時すぐ言葉にすることができるので、全体を円滑に進行することができます。

 

そういった根拠を自分の中に蓄積していくことが、制作仲間や自分の身を守ることになります。 

今日ご紹介した本はそういう意味でもお役に立つ本だと思いますので、自分のディレクションに不安がある人はぜひ読んでみてくださいね。

Adobe Typeより源ノ明朝がリリース。フリーの明朝体フォントと比較してみました

f:id:sala1107:20170404204321p:plain

Adobe Typeより源ノ明朝がリリースされました。

source.typekit.com

源ノ明朝フォントは、源ノ角ゴシックと対をなす東アジア人向け(簡体中国語、繁体中国語、日本語、および韓国語)の統一された書体デザインのニーズに応えるためにリリースされたフリーのWebフォントです。太さも7段階から選ぶことができます。

 

Typekitのライブラリから無料でダウンロードができ、Webフォントとして使用できるのはもちろんのこと、システムに同期してデスクトップフォントとしても使用できます。

 

もちろん、Win、Macともに使えるので、Winで作成した資料をMacで開いたら該当するフォントがなくて違って見える、ということも、双方に源ノ明朝がダウンロードされていれば問題なく閲覧することができます。

 

では、源ノ明朝とは、どのようなフォントなのでしょうか。

早速、フリーの明朝体フォントで比較してみました。

 

f:id:sala1107:20170404221222p:plain

 

f:id:sala1107:20170404220547p:plain

 

このように比較してみると、ヒラギノ明朝Proが力強く、平成明朝Stdがポップな印象ですね。

源ノ明朝はこの中では游明朝に近い品のあるフォントに仕上がっていますが、游明朝の方が少し華奢でしょうか。この源ノ明朝はMediumですが、LightやBoldも対応されており、太さを変えることで印象を変えることもできます。

 

今まで明朝体を使うデザインはMacならヒラギノ明朝、Winなら游明朝、というようにfont-familyの指定をすることが多かったと思いますが、今後はOSの垣根を越えて源ノ明朝が明朝体の標準Webフォントとして活躍してくれそうですね。

私がオススメするUI・デザインの本

f:id:sala1107:20170331012827j:plain

今日は私が実際に読んでみて本当に良かったと思うWeb制作の書籍を紹介していきます。

 

 

UI

モバイル・ユーザビリティ 使いやすいUIデザインの秘訣

モバイル・ユーザビリティ 使いやすいUIデザインの秘訣

モバイル・ユーザビリティ 使いやすいUIデザインの秘訣

 

出版年:2013年 

UIの第一人者ヤコブ・ニールセンの本。この年はレスポンシブデザインが流行しはじめ、「モバイルファースト」という言葉が認知され始めた年でもあります。

UIデザインの事例は今では古くなっていますが、ユーザーテストの事例を根拠に、どのプロセスにおいてユーザーが離脱しやすいのかといった基本的な考え方は不変であり参考になります。

UIデザインの心理学―わかりやすさ・使いやすさの法則

UIデザインの心理学―わかりやすさ・使いやすさの法則

UIデザインの心理学―わかりやすさ・使いやすさの法則

 

 出版年:2015年

学術的に人間の知覚や認知を解説した上で、よくあるUI事例があげられています。これもUIデザインの事例は古いですが根拠は明瞭であり、考え方は不変なため何度も読み直したい本です。文字が多く読み応えも十分。また、客先でWFプレビューの際に「なぜこのようなUIか」を論理的に説明するのにも役に立つ本です。

 デザイン

 ノンデザイナーズ・デザインブック [第4版]

ノンデザイナーズ・デザインブック [第4版]

ノンデザイナーズ・デザインブック [第4版]

 

出版年:2016年

レイアウト、イメージを効果的に使うときの考え方、フォントの意味や構造、使い方など、DTP、Webなどの事例を紹介しながら丁寧に分かりやすく解説されています。個人的にとても気に入っている本で最初の出会いは第1版でしたが、第4版を買い直しました。私自身も今でも読み直しますし、初心者のデザイナーさんには必ず紹介している本です。

 

 なるほどデザイン

なるほどデザイン

なるほどデザイン

 

出版年:2015年

視覚的に楽しく学べる本です。レイアウトを組み立てるときのプロセス(何を伝えたいのかを読み取る、情報の強弱を決定する、方向性を決める、骨格をつくる...など)や、フォントなど、デザイン制作するにあたり必要なことを丁寧に解説されている本です。日本の書籍のため、日本語に適したレイアウトやフォント紹介もあります。事例はDTPメインですが、デザインの基本を学ぶ意味ではとても参考になる良い本です。

 

 まとめ

書籍の良いところは体系立てて分かりやすく解説されているところですが、Web制作においては流行の移り変わりが非常に早いため、デメリットはすぐに古くなってしまう点にあります。実は他にも良い本はたくさんあるのですが、何年もつかえそうな本を選んだところ、結局DTP寄りな本ばかりになってしまいました。

まずは基本を学んだ上で、流行を取り入れていくというスタイルをとった方が実践的な知見が積まれていくのではないでしょうか。

また、本は人によって紙の質やフォント、デザインの好みもありますから、本屋さんに行って自分好みの本を探すのも良いですね。

読書のススメ。本は他人の経験を疑似体験する割安な方法

f:id:sala1107:20170331012807j:plain

勉強方法として「【初心者向け】Web制作に必要なツールを無料で学べるサイトまとめ」では無料で分かりやすいチュートリアルを紹介しました。それと合わせて私は本もお勧めします。ここで言う本は、ビジネス書や制作ノウハウを解説した本です。

 

私はコラムやブログはもちろん逐一チェックしていますが、どうしても情報が断片的になってしまいます。参考になるTipsはどんどんクリップしますが、いざというときにすぐ出てこないときもありますし、「アジャイルvsウォーターフォール」といった、正解のないオピニオンブログの内容は、その人の現場や立場によって発言が大きく異なります

  

それにひきかえ本は良いです。本は知見のある人物が順序立てて分かりやすく解説してくれます。しかも大体1冊2000~3000円程度。最近、流行りの○○サロンなどにお金を払うよりも遥かにコスパが良いです。

 

もちろん、「買わなきゃ良かった」と後悔する本もありますが、その場合は著者名をチェックして、「この会社の○○さんは、こういう考えの人なんだな。」と自分の知見のひとつとなります。

 

読書の習慣をつけるなら、まず始めにお勧めしたいのがこの本です。

レバレッジ・リーディング

レバレッジ・リーディング

 

他人の経験を疑似体験する割安な方法

汗水たらし、血のにじむような努力をした他の人の数十年分の試行錯誤の軌跡が、ほんの数時間で理解できるよう本の中には情報が整理されているのです。

(2006年)本田直之「リバレッジ・リーディング」

 

「速読」ではなく「多読」を勧める本です。じっくり読書をするのではなく、自分に必要な情報を短い時間で自らの知見として取り込むノウハウが書かれています。

 

私は本にメモ書きをするのは好きではないので書き込みはしないですが、全体をサラッと流し読みして、興味のある箇所だけ何度も読み返す、という癖がつきました。

ある程度、時間が経過した後に読み返すと、意外と忘れていることも多いです。

 

この本は、私がまだWebディレクターになったばかりの頃に読書家のリーダーが勧めてくれた、読書の大切さ、本の選び方、本の読み進め方を教えてくれる原点となった思い入れのある本です。

 

「本は読みたいけど仕事が忙しくて時間がない」という方にも役に立つ本ですので、興味がある方はぜひ読んでみてください。

【初心者向け】Web制作に必要なツールを無料で学べるサイトまとめ

f:id:sala1107:20170330141434j:plain

今日は私がお勧めするWeb制作に関するツールを無料で学べるサイトをまとめます。

「わからないことあったらググります。」

という人もおりますが、Web検索の弱点は自分が知らないことは検索できないんですよね。基本をひと通り勉強すると業務がとてもはかどりますよ。

Adobeソフト

 Adobeラーニング

helpx.adobe.com

 AdobeラーニングはAdobe製品の機能を短時間のムービーでわかりやすく、しかも無料で解説してくれるサイトです。PhotoshopIllustratorなど主要なアプリケーションはここで使い方を無料で学ぶことができます。

Adobe Creative Station

https://blogs.adobe.com/creativestation/

ひと通り機能が使いこなせるようになれば、新機能の使い方を丁寧に教えてくれる“Adobe Creative Station”がお勧めです。

adobe製品関連の最新機能や使い方、Tips紹介がされています。

コーディング

Codeprep(コードプレップ)

codeprep.jp

HTML、CSSJavascriptjQueryPHPSVG、アニメーションなど様々なカリキュラムが組まれています。自分のペースで自分の学びたいことを1件ずつ学べますし、正解したときのUIもゲーム感覚で気持ちいいです。個人的にはイチオシです。

Progate(プロゲート)

prog-8.com

DODEPREPでひと通り勉強したら、今度はこちらで勉強することをお勧めします。Progate(プロゲート)はよくあるUIのお題を、実際に自分でコーディングすることで、コードを学ぶことができます。かわいいイラストもなごみます。

 ドットインストール

http://dotinstall.com/

上記2件を使いこなせるようになれば、ドットインストールに移行することをお勧めします。HTML、CSSJavaScriptPHPなどWeb制作に必要なコードをレベルや目的に合わせて3分以内の動画でわかりやすく講義してくれます。制作で行き詰ったときのヒントになるものもあるかもしれません。

有料プランもありますが、無料プランでも十分勉強できます。

MDN(開発者向けのWeb技術)

developer.mozilla.org

HTML、CSSJavaScript、Web APIs、SVGなど、Web制作で必要な言語をチュートリアルから丁寧に基本を学べます。ただ、テキストベースで少しマニアックな情報も多いかもしれません。私は正式な情報を知りたい時に使っています。

なお、公式情報ならW3Cを閲覧するのがベストですが、MDNの方が分かりやすくまとまっているのでこちらを推したいと思います。

 WEB技術の世界標準化機構W3C(英語)の公式サイトはこちら。

www.w3.org

 

Git

猿でもわかるGit入門

www.backlog.jp

Backlogを運営しているNulubさんのGitリファレンスがとても分かりやすいです。なお、SVNもGitと非常によく似ていますが、個人が作業したバージョン管理が楽、マージ作業も楽、など様々なメリットから今はGitが主流ですのでこちらを勉強するのをお勧めします。

 まとめ

基本的な使い方が分かれば、あとはWeb検索で様々な情報を調べやすいと思います。また、私が普段チェックしている制作ブログやサイトを紹介しようと思ったのですが、思いの外、膨大な量であることに気付いたので、それはまた別の機会に。