すべて公開!私のWeb制作スキルについて【HTML/CSS,WordPress】

  •   
    webサイト

    こんにちは!えひめのMiho(@ehimemiho)です。

    未経験からHTML&CSSを学び、自分の作ったWordPressテーマでこのブログをはじめて約7ヶ月がたちました。

    ちょうど50記事をこえたタイミングで、私のWeb制作スキルについて聞かれることが増えてきました。なので今日は、①私が学習した内容(HTML&CSS)②Web制作で「できること、できないこと」をまとめておきたいと思います。

    HTML&CSSを学ぶと何ができるようになるか、どうやってサイトができたのかなどを知りたい方の参考になれば、うれしいです。

    学んだこと

    ⒈CodeGritの【Web制作入門コース】

    当ブログ記事「文系でパソコンも苦手だった私がCodeGritでプログラミングを学べた理由」で紹介したように、私はCodeGritというオンラインプログラミングスクールでHTML&CSSを学びました。

    追記:CodeGritはサービスを終了しています(2020年)

    きっかけは、こちらのwasabiさんのツイートでした。

    CodeGritのカバー画像
    CodeGritのホームページ

    CodeGritを選んだ理由は、一般的なプログラミングスクールと異なりCodeGritが学習者とメンターを直接つなげるサービスのため、料金が他に比べてとても安かったからです。

    参考記事>>>「文系でパソコンも苦手だった私がCodeGritでプログラミングを学べた理由」

    【Web制作入門コース】では、HTML5とCSS3を中心に次の内容を学びました。学習期間は4ヶ月間、週15時間で合計200時間、子どもが寝たあとや週末に学習しました。

    HTML/CSSコースで学んだスキル
    ・HTML5
    ・CSS3
    ・フォーム
    ・リスポンシブWebデザイン
    ・Flexbox
    ・オブジェクト指向CSS
    ・CSSアニメーション
    ・SASS
    ・Bootstrap

    具体的にはオリジナルのテキストによる11個のレッスンと、学んだことを実践しながら身につけるための11のチャレンジ課題に取り組みました。

    ⒉ドットインストール、Progate(プロゲート)

    両サービスとも有料会員になり、CodeGritのテキストの理解を深めたり、課題提出のための知識を補いました。

    ドットインストール@dotinstall)では、ローカル開発環境の構築、Bootstrap 入門、CSSグリットレイアウトなど3分間動画を繰り返し視聴。最終的に153のレッスン動画を完了しました。

    Progate(@progateJP)では、最終Lv. 47、総演習クリア数120、終了レッスン4でした。

    Progateのダッシュボードより
    Progateでクリアした4レッスン

    課題の難易度でいうと、CodeGritの方が異次元レベルで難しかったです。理由は、CodeGritは修了後すぐ仕事ができることをゴールにしてるスクールだからです。

    とにかくググったり、購入した書籍を参照しながら、なんとか11個のチャレンジ課題に取り組みました。

    ⒊メンターとのWordPressオリジナルテーマ制作

    CodeGritの【Web制作入門コース】を修了したあとは、他のプログラミング言語を学ぶのではなく、WordPressのオリジナルテーマの制作に取りかかりました。

    理由は、それまで6年間で500記事以上書いていたアメブロから、WordPressに移行するのが数年来の夢だったからです。自分の好きなデザインで、好きな機能を搭載した自分だけのサイトを作って運営したかったのです。

    WordPressのオリジナルテーマ制作では、CodeGritの【Web制作入門コース】でお世話になったArisaさん(フルスタックエンジニア)に、引き続きメンターをお願いしました。

    2018年6月から2019年3月まで、仕事や子育てと両立させながらのWeb開発でした。

    WPのテーマ開発について
    基本的な骨組みやデザイン、構造、サーバーの設置は私が行いました。
    ②その上で、まだ学習していなかったPHPに関しては、メンターから参考資料をもらって補ったり、困った時に質問してヒントをもらったりしました。
    機能的なところではメンターがPHPで一部コードを書いたところはありますが、7割わたし、3割メンターと言う感じで、私のWordPressのテーマは開発されたイメージです

    私の「できること、できないこと」

    web制作スキル
    Fabrizio Van MarcianoによるPixabayからの画像

    ⒈できること

    WordPressでのWeb開発

    2018年12月にWordPress 5.0 へのアップデートがリリースされましたが、私が開発したのは最新Ver.5の一つ前のバージョンになります

    1つ前までのバージョンと今のバージョンでは開発に使う言語が異なります。

    今のバージョンはJavaScriptとReactで開発をするのですが、私が開発をした1つ前までの旧バージョンではPHPを使っていました。

    なので、旧バージョンで使われていた開発方法であれば私のスキルでテーマの開発やカスタマイズは可能です。 

    旧バージョンで開発をしてサイト公開をする場合の留意点としては、WPが旧来バージョンのWPサポートを終了した場合に、何らかのバグが起こる可能性はあるかと思います。

    WordPressの運営〜記事の執筆やSEO対策

    WordPressの運営面では、これまで半年間あまりで50記事を書きSEO対策にも力を入れてきました。

    ダッシュボードにも慣れていますし、プラグインに頼らない軽いサイトの維持や、ユーザーファーストのSEO対策についても対応できます。

    参考記事>>>「PC向けページ速度95点!プラグインに頼らない5つのSEO対策」

    ⒉できないこと

    WordPress 5.0以降のJavaScriptとReactの言語を使っての開発は、現段階の私のスキルでは難しいです。

    ただし、WordPress 5.0以降のWordPressであっても、導入(サーバー、ドメイン関連やWPのインストールおよび基礎設定)や、運営、コンテンツのカスタマイズ、SEO対策、メンテナンスなどは、行うことができます。

    おわりに

    今日は、私のWeb開発のスキルと、WordPressの運営面で「できること/できないこと」をまとめてみました。

    このサイトを立ち上げて約7ヶ月夢中で走ってきましたが、このタイミングで自分のスキルを振り返れたことはとてもよかったです。

    ありのまま客観的に自分のスキルを整理したたことで、「来年も一歩ずつ、できることをこつこつ増やしていこう」ととても前向きな気持ちになれたからです。

    以下、旧ブログのアメブロからの参考記事です。私の学習記録やサイト制作の失敗談が少しでも誰かの役に立てたらうれしいです。



    参考記事>>>「文系でパソコンも苦手だった私がCodeGritでプログラミングを学べた理由」

    ではでは!ここまでお読みいただきありがとうございました。

    また来て下さいね。