「ネットの参考サイトの模写は自分には難しすぎるよ...」Progateの基礎学習を終えて、次の練習課題が欲しいけどどうしたらいいのかわからないという人は非常に多いと考えられます。私もそのうちの一人だったからです。有名なインフルエンサーは「とりあえず、自分で作るか、すぐに案件を取れ」と発言はするけれども、あと一つか二つ練習してから本番に移りたいとずっと思っていました。いくらネットで方法を調べても「少しレベルの高い参考サイト」を紹介されていて、なかなか行動にできず、「もうあきらめようかな...」と考えていました。ある時にふと思ったことがありました。「自分で作れるWebデザインを作って、練習課題にしたら良いのでは?」と考えつき、Photoshopなどのレベルの高いアプリを使わずにデザインする方法はないかと調べていると、あるアプリに出会いました。それがAdobeのXDです。XDは初心者でも簡単にデザインができる素晴らしいアプリで、私はXDで簡単なデザインを作り、それをコーディングの練習をしています。いうことで今回は、XDで簡略デザインを作成し、コーディングするメリットなどについてご紹介します。まとめ:プログラミングとデザインは自分でしようXDとはXDとは、ユーザー操作性をデザイン、プロトタイプ化、共有するためのプラットフォームです。ワイヤーフレーム、ビジュアルデザイン、インタラクションデザイン、プロトタイプ化、プレビュー、共有間の切り替えが簡単な、オールインワンの強力なツールです。(公式サイトより)XDについて公式が説明されているのですが、よくわからない人がほとんどだと思うので、まずは説明文の横文字解説をします。ワイヤーフレーム...Webサイトの要素の配置をあらかじめ決めておく設計図のことデザインカンプ...Webサイト納品先の顧客に見せるデザインの完成形図のことインタラクションデザイン...人が何かを操作や行動をしたときに、Webサイトのシステムや要素などが人のアクションに対しての反応を示すデザインのことプロトタイプ...Webサイトの最初の大体の模型設計図のことビジュアルデザイン...写真や絵などの視覚から情報を伝えることを目的としたデザインのことプラットフォーム...簡単にいうと、今回はXDというアプリのことユーザー...Webサイトを利用する人のことそして、公式の説明文を簡単にかみ砕くと以下の通りです。XDとはWebサイトに来る人のためのサイトをデザインして簡略模型図を作って、作業仲間に共有できるアプリです。Webサイトを作る際に必要なことが簡単にできて、これ一つでデザインができる優れものです。(しかも超軽い)今回はこの便利なXDを使った簡略デザインし、コーディングしていくメリットについてご説明していきます。実際のWebサイト設計の場面に良く使われてきている、本当に便利なアプリなのでぜひ一緒に使っていきましょう。XDをダウンロードする[adchord]XDを使ったオリジナルデザインの作成XDを使ってデザインを作っていきたいと思うのですが、今回は簡単なデザインをご用意したので、ご覧ください。XDを使えば30分くらいで上記の画像ようなオリジナルデザインができます。「えー、わざわざ自分でデザインしたくないなぁ...」と思うかもしれませんが、自分でデザインすることで以下のような3つのメリットが得られます。デザインスキルも同時に身に付けることができる自分に合ったデザインを用意することができる上流工程のスキルを身に付けられるそれぞれを簡単にご説明していきます。デザインスキルも同時に身に付けることができるいま、本記事を読んでいるほとんどが将来はフリーランスエンジニアになって自由な時間を過ごしながらお金を稼ぎたいという夢や目標をもっていると思います。フリーランスエンジニアになっても一人では仕事はできないことがあります。それがデザインも一緒にお願いするクライアントに出会ったときです。ほかのデザイナーさんと協業したり、コーディング案件だけを受注するのもいいですが、いつか収入に頭打ちがやってくる可能性が非常に高いので、一人で稼いでいきたいという人はデザインスキルも同時に身に付けていくことをおすすめします。自分に合ったデザインを用意することができるオリジナルデザインであれば、レベルのあったWebサイトを制作することができます。ネット上ではAppleやAirbnbなどのWebサイトが練習として丁度良いと言われていますが、はっきり申し上げるとProgateを終えたばかりの初心者が簡単にできるレベルではありません。下手したら心が折れる可能性があるため私は強くはおすすめできませんが、XDでオリジナルデザインを作れば、自由にスキルに合ったものを作ることができます。プログラミングができなくてあきらめた人の多くは、本当に丁度いい練習課題がなかったからだと考えられるので、Progateを終えた人は自分に合った簡単なデザインを作りましょう。上流工程のスキルを身に付けられる参考サイトを模写することは良いことなのですが、ワイヤーフレーム(設計図)から考えて、Webサイトを制作していくほうが将来的には成長できます。Webサイトが必要とする機能などを理解することができ、コーディングの際には機能がどういう役割を持っているのかを理解できるようになるからです。Webサイト制作には作るスキルも必要ですが、必要な要素や機能を定義できるスキルも必要不可欠です。要素や機能を定義することをWeb業界では要件定義をするといい、上流工程の一部の仕事になるので、将来はWebディレクターになりたいという人は必ず必要なスキルとなります。以上の3つの理由から、XDでオリジナルデザインを作ってから制作していくことをおすすめしています。[adchord]XDデザインをコーディングしていく次にXDで作ったオリジナルデザインをコーディングしていきます。Progateを一通り終えてローカル環境(自分のパソコン上の環境のこと)での作業は初めてだと思うので、コーディングするためにテキストエディタをインストールするところから始めます。Code(以下、VScode)というマイクロソフト社が開発したオープンソースのテキストエディタです。私がVScodeを使っている最大の理由はとにかく動作が軽いからです。通常のテキストエディタはスペックが低いノートパソコンで使用すると、熱くなって強制終了することがあるのですが、VScodeはほとんど強制終了が起きることはありません。動作が軽いからといってVscodeのスペックが低いわけでもなく、無料なのに高すぎるスペックのおかげで多くのエンジニアが愛するテキストエディタとなっています。VScodeをダウンロードする先ほど、XDで作成したオリジナルデザインをベースにして、VScodeでコーディングしていきます。VScodeには基本機能としてEmmet(エメット)と呼ばれるHTML&CSSの記述や編集をサポートしてくれる機能が搭載されており、独自の省略方法によってコーディングを爆速化するために非常に便利です。Emmetを使ったHTMLひな形の記述方法は以下の通りになります。一瞬にしてHTMLのひな形が出現します。<ul>、<li>要素を以下のように記述すると爆速でコーディングができるようになります。このように、Emmet機能は効率的にコーディングするためには必要不可欠です。いうことで、VScodeでEmmet機能を利用したオリジナルデザインをコーディングしていきましょう。Emmet機能の省略記述をもっと知りたい方はこちら作成したXDデザインの販売方法XDでオリジナルデザインを作成し、実際にコーディングして終えた人は、そのオリジナルデザインを販売することで、Progate終わったけどいい練習課題がなくて同じように困っている初心者を助けることができます。プログラミング初心者を助けることができ、収益にもなるのでお互いにとってwin-winな関係を持てるうえに、XDでオリジナルデザインを配布してくれる人という業界内でのポジショニングもできるので非常におすすめです。やって販売するのかについてですが、noteというサービスを利用することで販売することが可能です。noteとは、クリエイターとユーザーを繋ぐことができるサービスで、ブログやSNSなどのように無料で利用することができ、さらに自分で作成したオリジナル商品や情報を手軽に売買することができるサービスです。XDデザインを販売しているユーザーがいますが、ごく少数なのでSNS上や業界のポジショニングを早くしておきたいという人はオリジナルデザインを販売するといいと思います。noteに登録して利用するまた、私がおすすめするユーザーを下記に記しておきますね。XDファイル】初級編【1-1】|竹内直人(コーディングサロン講師)|noteこんにちは。コーディングサロンの竹内と申します。「XDでオリジナルデザイン作りたいけど、デザイン苦手だなぁ...」XDを使ったオリジナルデザイン作成についてご紹介してきたのですが、上記のようにデザインの知識が全くなくて、どういうふうにデザインしていったらいいのかわからないという人もいると考えられるので、私がいつも参考にしているデザインサイトをご紹介します。LPとはランディングページのことを意味しており、Web広告などで利用されることが多い一枚物のページなのですが、LPはホームページなどと違いデザイン性が重視されるページなので、オリジナルデザインを作成する際のアイデアのヒントとして参考にします。Clipでは通常ホームページのようなデザインが多いので、デザイン性はLPと比べて劣りますが、コーディングの基礎を学ぶにはホームページのような基礎的なことができるほうが重要なので、まずは練習したいという人はホームページ型のページをデザイン・コーディングすることをおすすめします。collectionです。collectionはスマホ対応したWebデザインを集めた参考サイトで、PC対応のコーディングが余裕でできるようになってきたら、次のステップとしてスマホ対応のページを作成すると良いでしょう。[adchord]まとめ:プログラミングとデザインは自分でしようプログラミングを身に付けたい人は他人がデザインしたサイトを模写していくのも良いと思いますが、自分でレベルのあったデザインを作成し、デザインスキルを向上させつつ、コーディングスキルも上げる方法のほうが合理的だと考えています。インフルエンサーのいうことがすべて正しいとは限らないので、自分なりの方法でスキルを身に付けていくことを頭の中に入れて行動していきましょう。【経験者が語る!】未経験からのITエンジニア転職のポイントを解説IT業界への転職に!おすすめの転職サービス5選JavaScriptのライブラリ5選を紹介!※エンジニアがライブラリ一覧を解説この記事を書いた人uri_writerSEOを意識したサイト・記事設計をこよなく愛する二年目Webマーケター。一か月だけのブログ運営を武器に未経験でWeb業界へ殴り込み&一発就職。