デザインカンプとXD
超お久しぶりです。前回からすごく間が開きましたが続きの更新でございます。
最近息子の戦闘力がかなり上がってきており(魔のイヤイヤ期到来)全然自分の時間も作れず、絶賛育児ノイローゼ中でございます😂
そのせいでかなり更新が遅れてしまいました💦今後もこんな感じでぼちぼち更新していくと思いますがどうか気長にお付き合いくださいませ🥺🙇
さて、本題に戻りますが前回テキストエディタを入れて書籍で学習を進めるところまで書きましたので、今回はその後の学習、いよいよ本格的に案件を模した学習を進めていきます。
Adobe XDをダウンロードしよう
まずはAdobeXDというデザイナーさんがWebデザインするときに使うソフトをダウンロードします。Photoshop(フォトショップ)やIllustrator(イラストレーター)といったAdobeのデザインソフトはご存じでしょうか？
写真加工やイラストの制作、Web制作デザイナーに欠かせないソフトがPhotoshop、Illustrator、AdobeXDなのでございます。
Photoshopは、主に写真やイラストの修正や合成に使われるソフトで、Illustratorは、イラストやロゴの制作に向いたソフトです。
じゃあXDは何かというと、WEBサイト・アプリ制作に適したデザインツールです。
これは私が実際にXDでデザインされたものをコーディングしたものなのですが、実際の案件では「このようなデザインでコーディングしてください」というクライアントからの仕様書をもとにコーディングしていくことになります。
この仕様書はだいたいXDやPhotoshopといったAdobeのソフトでデザインされたものなので、XDなどを持ってないとそもそも案件を受けることすらできません😓
PhotoshopやIllustratorは有料プランに加入しないと使えない(７日間の無料体験版はあります)のですがXDはとりあえずは無料で使うことができるので、まずは何はともあれダウンロードしておきましょう！無料のスタータープランというものがあるのでそれをダウンロードします。
https://www.adobe.com/jp/products/xd.html
noteを活用してデザインカンプからのコーディングをしよう
みなさん、note(ノート)というものをご存知ですか？noteとは、クリエイターが文章や画像、音声、動画を投稿して、ユーザーがそのコンテンツを楽しんで応援できるメディアプラットフォームです。このnoteの中には、実際の案件を模したデザインカンプを配布している方もいます。
noteのURLはこちらです。まずは覗いてみてください。https://note.com
このnote内の、ちづみさんという方のコーディングの練習をしよう入門編という教材が初めてのコーディング課題にはとても良いので、オススメです！
https://note.com/chizumi_/n/nf0ff69e550c0
この方はProgateを終えたばかりの初学者に向けて初めてのXDからのコーディングについても語られているので分かりやすく、それに準じた難易度のデザインも配布されているので、とにかく最初の模擬練習としては丁度良いですね！
とにかくXDに触って慣れることと、デザインカンプからのコーディングとはこんな感じなんだなと思いながらぼちぼちやってみてください。
とにかくググりまくれ！
誰にもコツや分からないところを教えてくれる人がいない独学では、とにかくググって情報を得ることが全てです😭私も参考書を読み終えていざ自分でコーディングするぞ！というときは分からないことだらけで、ググっては解決、ググッては解決の繰り返しでした。(てか今でもそうですけどね_:(´ཀ`」 ∠):)
なのでそれが苦痛に感じる人は、正直独学でやるのは無理だと思いますのでデイトラのWeb制作コースなどの優良教材で始めてみるのが良いと思います。
私も過去何度も躓き、挫折しています。私の場合は躓いても粘って何とか時間をかけてやってこれるド根性スキルでやってきたわけですが、正直キツく、好きなことでも諦めようかな？と思いました。お金があればデイトラやテックアカデミーのようなスクールも検討しようと思ったくらいです😅
なので独学ブログでこんなことを言うのも何ですが、お金に余裕がある人でしたら、素直にメンター付きの有料教材で学ぶべきだと思います。
テックアカデミーなんかは高額で時間もそれなりに取れる人じゃないとキツいと思いますが、確実な実績があります。
無料相談もありますので、まずは話だけでも聞きにいく、という形でも良いのではないでしょうか？私も時間とお金に余裕があれば受けたかった😂笑
ディトラは、完全オンライン教材でスクールに通うのに比べて格段に安いのがメリット。
安いとはいっても、かなり内容は充実しており、メンターの方にもいつでも質問できる体制のようです。基本的に自分で全部ググってやるしかない独学に比べて確実なエンジニアの方に見てもらいながらできるので、僕が今有料教材で一から学ぶとしたらこれですかね！いろんなサイトで調べてみてもけっこう評判は良いみたいです！
それでも独学で学びたい！お金をできる限りかけたくない！時間と労力をかけてでも己の力でやりきるんだ！という方は、もれなく私と同じ身の程知らずですので共に頑張りましょう笑👍
役に立ったページは必ずブクマしよう
ググって得た情報は、後に自分の貴重なテキストになりますので、役に立ったページは必ずブクマしていつでも見れるようにしておきましょう！
私もCSSアニメーションやJSでのハンバーガーメニューの作り方など、ピンポイントで欲しい情報をたくさん抜き取ってきましたので、そういった自分の欲しい情報を手に入れるためにググってブクマする癖はつけておくべきですね！
勉強がはかどる便利グッズ
bluetooth イヤホン Eynew ワイヤレスイヤホン ブルートゥース イヤホン LEDディスプレイ表示 ぶるーとぅーすイヤホン Type‐C急速充電 イヤフォン ヘッドセット マイク付き
こちらのイヤホンはなんといってもコスパ最高！なところです！3000円以下で音質も良くてバッテリーも長持ちします。
ケースから出して即Bluetooth接続もするし音量調節もしやすい等、高いイヤホンじゃなくてもコレ使えば大体OK！みたいなところがあるので、リラックスしたいときや勉強したり家事したりと様々なシーンのお供にピッタリだと思います！ワイヤレスのイヤホンを購入したことがない方は入門用としてもおススメです！
デスクライト LED 目に優しい 電気スタンド スタンドライト 卓上ライト テーブルランプ 省エネ テーブルライト ライトスタンド USBポート付 タッチセンサー 読書 勉強 仕事 学習 折り畳み式 タイマー メモリー機能 10段階明るさ 5色のライト コンセントがない
こちらのデスクライトは夜子供が寝てから学習するぞ！というときに手元だけ明るくして勉強したいと思って購入したのですが、思った以上に使い勝手がよく、デザインも価格の割にはカッコいいので、気に入っています！
角度も自由に変えられて明るさも10段階、色のコントラストも5種類から選べたりおしゃれな雰囲気を醸し出して勉強することもできます。
スマホを充電できるので、充電しながら夜寝る前の読書タイムを楽しむのも良いでしょう。
Reodoeer ブックスタンド 筆記台 書見台 読書台 本立て 6段階調整 竹製
こちらのブックスタンド、竹を素材にしておりとても表面がきれいです！軽くて持ち運びやすいので、キッチンに持って行ってレシピ本を立てながら料理するときにも重宝するし、ノートPCだって立てられます！
独学では参考書を読みながらパソコンを使うシーンが非常に多くなるので、もはやマストなアイテムの一つだと言えるでしょう。日常生活においても様々なシーンで活躍すること間違いなしです！
いかがでしたでしょうか？初めてのことだらけでとても難しいですよね。
私もこのあたりの独学ルートから自分には無理なんじゃないか？と正直何度も自問自答してました。
なんとかぼちぼち続けてたらなんとなくわかるようになっていって、もう少しできるかな？と思いながら少しずつ道が開けていき、コーディングもどんどんできるようになっていった所存でございます。
なのでこの先何度もくじける場面が出てくると思いますが、諦めずにコツコツと続けていくことが何よりですので頑張っていきましょう！
では本日はこの辺で失礼いたします。では！
