WEB部門での実務経験

実務経験24・25日目、案件を取る為にポートフォリオサイトが必要

実務経験25日目

ポートフォリオサイトは0から作ってもそうでなくても必ず必要

コーディングをする時に同じ部分が何度も出てくる時は作業効率化した方がいい

特に商品ページのLPを作る時ですがシリーズ物を1つのページにする時に↓みたいな同じ部分が何度もでてきます。

実務経験購入ボタンは1つのページで何度も出てくる時があります

 

こんな時cssの同じ部分を何度も考えるのではなく最初から作っておいた方がいいです。

私は↓みたいにエディタの最初に書いてます。

実務経験共通部分はエディタの最初に書くようにしています

 

<p>文章</p>の文章は改行してはいけない

今更ですがpタグで文章をはさむ時ですが文章を改行すると余白が付くことにコーディングしたLPの校正をしてもらって気がつきました。

実務経験25日目文章の改行はしない方がよく1行で書くか<br>
を使わないといけないです

 

実務経験↑のコードの書き方だと1行目の「の」と「保」の間に余白ができています

 

 

自分で0からポートフォリオサイトを作る時はワイヤーフレームを書くのが大変

本題のポートフォリオサイトですがいろいろググった結果0から作りwordpress化するかresumeなどのポートフォリオサイトを使うかポートフォリオ専用のwordpressのテーマを使うかがあると分かりました。

私はwordpressでオリジナルテーマを作ることができるのでせっかくだから作ろうと思いました。

ワイヤーフレームですが紙に書くのでいいみたいなので裏紙に書きましたが内容をちゃんと考えないといけないです。

次にデザインカンプを書くことになりますが書いている途中で「あっ、あれを書くのを忘れてた」みたいになった時を防ぐためです。

初めてワイヤーフレームを書いたのでめっちゃ時間がかかりました、2日は考えたと思います。

何度も書き直しをして↓にしました。

実務経験 実務経験

細かい書き方は意識せず「大体こんな感じにしよう」位の気持ちでいいと思います。

ググった時ワイヤーフレームを書く時にXDを勧める人がいましたがそれはワイヤーフレームに慣れてからでいいと思います。

 

ワイヤーフレームを書いたら次はデザインカンプ

私はillustratorを使って書きましたがXDでもいいと思います。

実務経験デザインカンプの全体

 

実務経験部分の拡大画像

 

実務経験部分の拡大画像

 

実務経験部分の拡大画像

 

AboutとWorksとContactの部分ですがクリックしたら続きが出るようにしたのですがワイヤーフレームとデザインカンプはなくぶっつけ本番で書くことにしました。

なるべくシンプルにするつもりだったからです。

実務経験25日目Aboutの中身の一部

 

実務経験25日目Contactの中身の一部

 

ネットでデザインカンプをクラウドワークスみたいな所に依頼しないとワイヤーフレームが台無しになるみたいに言う人がいましたがそれはある程度実績を積んでからすればいいと思います。

依頼するとそれなりにお金がかかりますが最初からそんなにお金を使いたくないと思うので。

デザインカンプが出来たらコーディング

ページが短いのでコーディングはすぐできました。

デザインカンプではレスポンシブは書いてませんがコーディングの時に直接考えています。

ヘッダーはkeyframesプロパティを使って1回だけ左から右に現れるようにしました。

ABOUT、SKILLS、WORKS、CONTACTはパララックスで左右から現れるようにしているのとスムーススクロールで該当箇所に飛ぶようにしています。

https://kyohayata.github.io/portfolio/で確認できます。

 

最後はMAMP(開発環境)でwordpress化

たぶんこれが一番簡単です、コードを載せます。

page.phpはAboutの所とお問い合わせの所で使っています。

single.phpはWorksの所で使っていますが作品が増えたらここを増やすことができるので投稿ページにしています。

「やった〜、簡単にできた!」と思い投稿ページと固定ページにcssを当ててないから当てようと思って記述をしたけど反映されません。

どうすればいいか分からなくてひたすらググって分からなくて5時間位悩んで「もしかしてコードの書き間違い?」と思い確認したら間違いがありました。

いや〜いい経験になりました 笑

万が一どうしてもcssが効かないと思ったらコードの書き間違いを疑った方がいいです。

投稿ページと固定ページにcssを当てる時はstyle.cssよりもwordpressの外観>追加cssで記述した方が楽にできるのでお勧めです。

実務経験25日目私は追加cssを使います

 

作品(Works)の部分の作り方

私が働いている会社のポートフォリオを見る人から言われたのですが作品はデザインする人なら画像のみでいいですが制作者などサイトを作る人の場合はサイトを載せた方がいいそうです。

サイトを載せる場合ですが運用されているサイトを模写した物なのかオリジナルで作ったのかやそのサイトを作ろう(模写しよう)と思った理由など説明をつけた方がいいそうです。

だから私はまず作品の説明をしてからサイトに飛ぶURLをつけることにしました。

約1週間かけて作ったポートフォリオサイトは↓です。

https://syougaihukutobiyou.com/portfolio/

ぜひポートフォリオサイトを作ってください、私はクラウドワークスやランサーズで営業をかけます。