コーディング

WEBエンジニアになろう! – 第1回 「作りたいもの、必要なソフトウェア」

「未経験からWEBエンジニアになろう!」シリーズの目次

  1. 作りたいもの、必要なソフトウェア
  2. はじめは何すればいいの?作業環境を作る
  3. ここからが本番マークアップとスタイル1
  4. マークアップとスタイル 2
  5. マークアップとスタイル 3
  6. マークアップとスタイル 4…いつまで続く
  7. プロならここまでやります見せます

学び方

まずはざっくりとYoutubeで流し見ていただいて、手を動かす時にこちらのページを見ながら作っていけば効率が良いと思います。

Youtubeはこちら

“WEBエンジニアになろう!”とは

Webエンジニア初心者~中級者までを対象としているシリーズです。

内容としてはHTML/CSS/Javascriptファイルを使ってデザインをそのままWebサイトにする方法を1から学んで、プロのWebエンジニアを目指そうというものです

道のりはかなり長いですが、少しづつ頑張りましょう

Webサイトとはなんぞや

Webには様々なサイトがあり、様々な作り方があります。ざっくりと分けるとこんな感じです。

いろんな作り方

  • 静的サイト(HTML/CSS/Javascritだけで作られているサイト)
  • CMS(WordPress,Joomlaなど)を使った作り方
  • フレームワーク(Nuxt,laravelなど) を使った作り方
  • 全部自分で作るフルスクラッチする方法
  • (アメブロなどWebサービスを利用する方法)

静的サイトはHTMLとCSSだけで作ることができます。

静的サイト以外のサイトを動的サイトと言うのですが、動的サイトを作る場合でもHTML/CSSが必ず必要で、Webサイト制作の基本とされています。ですのでまずHTML/CSSを学びましょう

HTML

マークアップ言語、これがタイトルで~これが本文で~っというの書いてあげる言語

CSS

この文字大きくして~、ここは間あけて~、っていうのを書いてあげるやつ

Javascript

このボタン押されたら、これを表示して!っていうプログラミング

Webエンジニアに必要なソフト

デザインソフト

コーディングするのになんでデザインソフトが必要?っと思われた方もいると思うのですが、コーダー(HTML/CSS作る人)はデザイナーが作ったファイルを開くためにはデザインソフトが必要なんです。

また一人でサービスを作る場合でも必ず必要なので、1つは持っておきましょう

代表的なデザインソフト
  • Adobe Illustrator (イラレ)
  • Adobe XD (エックスディー)
  • Adobe Photoshop (フォトショ)
  • Sketch
  • Affinity Designer (イラレの買い切りのやつ)
  • Affinity Photo (フォトショの買い切りのやつ)

10年やってきましたがデザイナーさんが使っているソフトはAdobe商品が98%です。残りはほとんど見たことがないです。

コーディングを受託する場合はとりあえずAdobe Creative Cloud(通称シー・シー)を購入すればイラレ,XD,フォトショは使えるので98%はカバーできます。

Adobe Creative Cloud コンプリート|12か月版|Windows/Mac対応|パッケージ(カード)コード版

今回はXDファイルを使うので無料のフリープランで良いです。

コーディングソフト

デザインソフトでデザインを見ながら実際にHTML/CSSを書くエディターが必要になります。

代表的なエディター

めっっっっちゃあります。ここで下手に紹介すると戦争が起こるので、とりあえずVSCodeにしましょう。無料で開発元は天下のMicrosoftです。めちゃ使いやすいです。自分もこれです。他のはあれです、ちょっとか….

[目標] 作りたいデザイン

* さっそくですが、デザインソフトのAdobe XDが無いとここからは進めません。

PCデザイン
スマートフォン(SP)デザイン

このシリーズの目標は”デザイン通りのコーディング”ですが、実はサイトデザインデータはかなり高級なもので、通常デザイナーさんに発注すると7万円以上かかります。(7万でも安い方)

ただデザインが無いとコーディングの勉強は出来ないので、よくあるパターンのデザイン作りました!どぞ使ってください。

通常のWebデザインもこんな感じなんですが、これは文字と画像を配置しただけっという感じです。プロのデザイナーさんに頼むともっと色んな要素が増え、もっとKAWAII感じに仕上げてもらえます。

XDデザインダウンロード

Download

コーディングのご依頼の場合、一般的にこのようなデザインが配布され、それを元にコーディングをします。間違ってもjpgやエクセルのデザインで作らないように…

フォント問題

配布ファイルですが、”Noto Sans CJK JP”というフォントを使用しています。
こちらに詳しい事が書いてあります。

次回へ続く

コーディング代行

高品質なソースコードをお約束

詳しくはこちら
背景イメージ
背景はFreepikによるデザイン

information

お問い合わせ