WEB部門での実務経験

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

実務経験25日目

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

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

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

 

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

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

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

 

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

恥ずかしい話、実務が始まるまで知らなかったのですがpタグで文章をはさむ時は文章を改行すると余白が付きます。

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

 

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

 

 

ポートフォリオサイトは0から作って他の人と差をつけよう

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

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

私はWEB制作の仕事をしていますがコーディング関係の仕事をするなら他の人と差別化する為にも自分のサイトを作った方がいいです。

実務未経験だと他の人と技術差がないので採用の判断材料にされるかもしれません

 

ワイヤーフレームを考えるのに一番時間がかかった

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

ワイヤーフレームの次にデザインカンプ(コーディングするための下書き)を書くことになりますが書いている途中で「あっ、あれを書くのを忘れてた」みたいになった時を防ぐためです。

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

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

実務経験pc用のトップページ

 

実務経験タブレット用のトップページ

 

スマホ用のトップページ

 

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

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

 

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

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

実務経験デザインカンプのトップページ全体

 

実務経験部分の拡大画像

 

実務経験部分の拡大画像

 

実務経験部分の拡大画像

 

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

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

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

 

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

 

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

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

それにあまりに完璧だと面接をした時にスキルがバレて余計なツッコミをされるかもしれないです。

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

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

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

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

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

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

 

最後はMAMP(開発環境)でテーマを作って圧縮する

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

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

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

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

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

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

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

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

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

 

作品(実績)の部分の作り方

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

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

記事の部分にコーディングデータを載せたかったのですが恐らくできないのでまず作品の説明をしてからサイトに飛ぶURLをつけることにしました。

約1週間かけて作ったポートフォリオサイトは↓です、この記事を読んだあなたもぜひポートフォリオサイトを作ってください、

https://syougaihukutobiyou.com/portfolio/

私はクラウドワークスやランサーズで営業をかけたいのですが技術力的にまだまだ無理なので実務経験を1年くらいつけてから案件を取るつもりです。

実務経験9、10、11日目。会社のLP(案件)作成が大変だった
実務経験11日目、いきなり案件を取るのはリスクしかない 初めて案件になる仕事を自分でやりました。 illustratorのデータを使ってコーディングをしたのですがデータがいくつか...