備忘録(？)：ポートフォリオサイト作成の流れ

4038 ワード
マークアップ コーディング ポートフォリオ マークアップ テキストリンク

どうやってサイト作成してるの？ということで・・・

こんにちは、またはこんばんは。
最近、情報交換会をしたときに「どのようにしてサイト作成してるんですか？」と質問を受けたので、
直近で作成したポートフォリオサイトを例に、流れをご紹介していきます。

作業の流れについて

一応Photoshop触れるということもあって、
Photoshopでデザイン作成　→　コーディング の流れで、サイト作成をしました。

..........................................

デザイン作成 - ラフ

ポートフォリオサイト用に予めラフを描いていたので、それを元にデザイン作成しました。

↑の2枚目の画像ですが、清書したものを間違って捨ててしまったので
とても汚いですね・・・。
(余談ですが、使用している方眼紙は無印のものです。推しております！)

ちなみに、ラフの時点でマークアップやfont-sizeなども
ある程度決めております。

ラフの時点で決めておくと、デザイン作成もコーディングも少しは楽になるかと思います。

デザイン作成 - 作成


複数ページのサイトだったら、ページごとにデータを作成しますが、
今回はTOPだけなので、必要なものを全部まとめています。
(TOPデザイン、favicon、ogp、モーダルウィンドウ3種)

アートボードの横幅ですが、シェア率が高いデスクトップサイズの1920pxにしています。
コンテンツ幅は無難な1000pxにして、ノートPCサイズでもちゃんと表示されるようにデザインを作成します。

ディスプレイサイズのシェア率、こちらを参考にしております。
モニター解像度のシェアを調べてみた（2020年1月版） | webseeya

..........................................

コーディング

デザインが完成したら、コーディング作業に入ります。
今回時短も兼ねて、Percolatorというテンプレートを使用しました。
Scssの圧縮とか楽ですし、head内の必要な情報とかも揃ってるのでオススメです。

コーディングですが、もちろん最初はマークアップ作業から行っていきます。
とてもざっくりですが、こんな感じでマークアップをしています。

<body>
    <!-- ヘッダー -->
    <header id="header" class="l-header">〜</header>

    <!-- メイン -->
    <main>
   　　　<!-- MV -->
        <div class="mv-area">〜</div>

   　　　<!-- コンテンツ -->
        <div class="contents-area">
            <section id="コンテンツ名01" class="contents-box コンテンツ名01"></section>
            <section id="コンテンツ名02" class="contents-box コンテンツ名02"></section>
            <section id="コンテンツ名03" class="contents-box コンテンツ名03"></section>
            <section id="コンテンツ名04" class="contents-box コンテンツ名04"></section>
        </div>
    </main>


    <!-- フッター -->
    <footer id="footer" class="l-footer"></footer>
</body>

マークアップを行う際、パッと見てで把握できるようにすることを心がけているので、
idとclassは該当する内容の名前を入れるようにしています。
(コンテンツブロックの大枠なら、contents-areaが例になります。)

マークアップが終わったら、コーディング作業に入ります。

大体こんな感じです

全体的にすっごくざっくりとした説明になりましたが、本当に大体こんな感じです。
マークアップに関しては、5年近くもやっていたのもあって、体に染み付いているという感じなので・・・。
慣れてなんぼ、な感じですね。