見出し画像

WEBサイトを作れるようになる連載

今回からウェブサイトをちゃんと作れる人になるための初心者向けの記事を執筆してみたいと思います。全て有料記事にするつもりです。
WEBスクールで提供している内容相当の物を作りたいと思います。
それを「これなら格安でしょう」という金額の有料記事として提供したいと考えています。

初期は記事が出揃ってないので、有料購入するのは損だと思いつつも、気合を入れるために導入の文章以外は全て有料で記事を書いてみたいと思います。

この連載で身につけられるスキル

Webサイトを1から構築するスキルをつけられる記事にしたいと考えています。

  • 基礎的なデザインの知識

  • Adobeツールによるデザイン

  • HTMLの知識と1からのサイトの構築

  • サーバーのレンタルとサイト公開

コンテンツ一覧

この連載で身につけられる能力は以下の通り。

  • 「デザインを学ぶといいことがあるぞ」の紹介

  • どこでどう学ぶのがベストか

  • デザインをするための環境の知識

  • 基礎的なレイアウトスキル

    • いろんなデザインを見て学ぼう

      • いい写真を使っとけばとりあえずそれっぽくなる

    • デザインを真似して学ぶ

    • 基本的なデザイン法則を知ろう

      • 揃える(サイズ/位置/色) / 注目させる / あえて崩す

      • フォントの印象について / 媒体によるサイズ

      • 色の知識と印象

  • デザインに関わる基礎知識

  • Adobe Illustratorの使い方

    • ロゴを作る

    • 文字と画像を配置してみる

    • チラシを作る / デザイン入稿の注意点

    • ベジェ曲線を使えるようになる

  • Adobe Photoshopの使い方

    • 写真を補正する

    • 人物や物を切り抜いてみる

    • 合成写真を作る

    • 解像度とカラーモードの話

  • Adobe XDの使い方

    • WEBサイトのワイヤー作り

    • WEBサイトをデザインする

  • デバイスと媒体による違い

WEBサイトをデザインしてみよう

  • Webサイト作りの道具について

  • WEBサイトが表示される仕組みについて

    • サーバーを借りてサイトを表示してみよう

    • ドメインを設定してみる

  • HTMLの基礎的な知識を身につける

    • よくあるファイル構成を知る

      • そもそもHTMLとは何か

    • HTMLの大枠の構成について

      • html / head / body 

      • link / script / style / meta

    • Webサイト運用担当として知っておくべきタグ

      • p / a / img / hr / br

      • 属性とは?  id と class について

      • h1 / h2 / h3 / h4 / h5 / h6

      • table / dl dt dd / ul dl li 

      • レイアウト用のタグ div / p

    • ページ上の役割を表すタグ

      • header / footer / main / aside / nav / article / section

    • フォームで使われるタグ

      • form / input / textarea / select option / label

WEBサイトを1から組み上げてみよう

結構長大になってしまいました。
ぼちぼちと書き上げていきたいと思います。