Web制作未経験の私が2ヶ月で1サイトを任せてもらえるまでに学んだこと【その1】

自己紹介

暖かくなって服装も春らしく。ちゃんけいです。 #chankei #idotdesign #福岡 #fukuoka #webdesigning

A photo posted by アイドットデザイン (@idotdesign) on

今月からアイドットデザインで社会人生活をスタートした福岡のちゃんけいです。

私は大学卒業後すぐにデジタルハリウッド福岡校(以下 デジハリ)のWebデザイナー専攻コースを受講し、コース終了した後にアイドットデザインに入りました。

私はデジハリのコースを終了したとはいえ特に優秀だったわけではなく、HTML・CSSで一通りWebサイトが制作できる程度で、Web制作会社での経験どころか社会人経験もありませんでした。

しかし、HTMLコーダーのアルバイトとしてアイドットデザインにやってきて2ヶ月でCMSを含んだWeb制作を任せてもらえるようになり、4月1日から正社員として働くことになりました。

Web業界は最初からある程度のスキルがないと会社に入ることができないとよく聞きますが、アイドットデザインは「やる気があるならうちで育てる!」という方針だったのでありがたい限りです。

今回から数回に渡って、私がこの2ヶ月で学んだことを書きたいと思います。

ツールの導入

最初に行ったのはホームページ制作に欠かせない、各種アプリやツールの導入です。

今まで使っていたツールを変えた理由は、「作業の効率化」です。

作業の効率化にこだわるという点は、この2ヶ月間でとても大切だと感じました。

テキストエディタ

Webスクールなどで使うテキストエディタはDreamweaverが多いと思いますが、アイドットデザインではSublimeTextを使っています。

Sublime Textのメリット

  • 動作が軽い
  • プラグインが豊富でカスタマイズできる
  • プラグインによりコーディングの効率化ができる

SublimeTextの導入を勉強した本はこちらです。

わからない部分は社内の方に教えてもらいましたが、基本的には自分で本を読んだりネットで記事を探して勉強しました。

私の使っているプラグインは、EmmetHayakuなどです。

他にも便利なプラグインがたくさんあるので、検索で「sublimetext プラグイン」や「sublimetext 爆速」などで調べてみてください。

ショートカット

パソコンやソフトウェアには便利なショートカットがあります。作業の効率化する上で使わない選択肢はありません。

Sublume textにもたくさんのショートカットがあり、ショートカットを使うことで同じ作業をする間に1行でも多くコードを書くことができます。

私がよく使うSublimeTextのショートカット

  • 文字列を選択する ⌘ + D
  • 1行複製する ⌘ + shift + D
  • 作業を1つ戻る ⌘ + Z
  • 作業を1つ進める ⌘ + shift + Z
  • 選択した行のインデントを増やす ⌘ + [
  • 選択した行のインデントを減らす ⌘ + ]

ショートカットはこちらの記事を参考にさせていただきました。

コーディングを高速化!Sublime Text 3でよく使うショートカットキー – NO TITLE

Sass

アイドットデザインではSassも導入されているため、私もSassの使い方を覚えました。

「Sassって何??」というところから1日で導入できたので、比較的簡単に導入しやすいツールだと思います。

Sassのすべてを理解するのは大変なので、今自分に必要な部分のみを理解すれば十分だと思います。私がひとまず理解したのは、Sassの基本と言われているネストのみでした。

Sassの勉強をした本はこちらです。

ツールの導入に関してはSublime textとSassの2点ですが、この時点で1週間が経っていたと思います。

参考にした本を読むペースは2~3日で1冊だったと思います。このペースで消化しないと仕事が進まないわけですし「早く学ばなくては!!!」と必死でした。

使い慣れたツールを変えることはハードルが高く感じますが、実際はそんなことありません。よりよい仕事をするためにはどんどん便利なツールを取り入れるべきだと私は思います。

HTML5

「HTML5を書けます。」

入社する前は自信をもって言ってましたが、働いてみると全然通用しませんでした……。

仕事ではHTML5を「早く正確に」書くことが求められます。

「正確に」とは、要素の使い方はもちろんなのですが「セマンティックなマークアップを心がける」ということです。

私は「セマンティックなマークアップ」を、研究論文を書くようにHTMLを書くことだと思います。

特に論文の目次のように、見出しをつけて章だてすることがHTMLのh要素の使い方と同じだと思います。

HTMLファイルを見た時に目次をしっかりと書き出すことが出来れば一番良いと思います。

わかりにくい考え方かもしれませんが、これを理解してコーディングすると作業スピードは倍以上違いますし、SEOにもよいのでWeb制作に関わるなら必ず理解しておくべきことだと思います。

HTMLを書く時に迷うのがクラス名の命名ですが、これについてはまた今度、CSS設計にてお話しします。

HTMLの参考にした本はこちらです。

今後読みたいのは次の本です。

勉強の参考にした記事はこちらです。

SEO対策として最低限押さえておきたいHTML/HTML5マークアップの大事な6つのポイント | Creive【クリーブ】

他にもたくさんあります。

CSS

HTMLを書く時に参考にした本は、CSSについても書かれています。

CSSはボックスモデルと包含ブロックの理解を深めることが大切だと思います。

ボックスモデルとは要素を箱に捉える考え方で、箱に対してmarginやborder、pafddingなどのCSSがどう影響するかを理解することが重要です。

backgroundはどこまで影響するか知っているか?
backgroundはurlと色を同時に指定できることを知っているか?
など、CSSはとにかく奥が深いです。

もっと書きたいのですが、それはCSS設計に関する回で書きたいと思います。

レスポンシブ対応

レスポンシブのコーディングは、どのサイズで見ても大丈夫なように見た目を整えることでMedia Queriesを使って対応します。

基本的にHTMLの書き換えはせず、CSSに例えば@media (max-width: 728px) {}というような、指定した横幅に対応したCSSを書きます。

アイドットデザインの業務ではレスポンシブ案件が当たり前になっているので、仕事をしていくうちに自然と覚えたような感覚でしたが、初めてレスポンシブに取り組む場合はギャラリーサイトで色々なサイトを見てみるのが一番参考になると思います。

まとめ

今回の記事はここまでになります。

ここまで書いた内容を学ぶのにおよそ1週間半が経っていたと思います。

何より意識したのは、正確さと作業スピードです。

アイドットデザインでは作業スピードのアップを未だに求められますが、制作スピードを上げることで、次の仕事を任せてもらえて自分にはメリットしかありません。

最後まで読んでいただきありがとうございました。
次回の記事では「CSS設計」を学んだ過程を書きたいと思います。

アイドットデザインのブログはWeb業界の話題に限らず幅広いビジネストピックについて書いています。
よろしければFacebookページのフォローをどうぞ!ビジネスに役立つ情報をお届けします!

福岡のホームページ制作・SEO対策はアイドットデザインまでご相談ください!
インターネット集客やWebマーケティングのご相談も承ります。

follow us in feedly

Facebookページに「いいね!」して更新情報をチェック!

« »