ポートフォリオサイト的なものを作りました。【ワークフローなど】

Design Web

フリーランスとして活動するようになって、クラウドワークスやランサーズで案件に応募する時に、実績や、ポートフォリオがあまりなかったので、サイトを0から作りました。

コーディングの練習・新しいスキルの取得も兼ねています。
なので、完璧ではないですが、一応公開しています。
*随時更新・アップデートしていく予定です。


以下では、作った時の流れを書いていこうかと思います。

スポンサードリンク

ポートフォリオサイト作成のワークフロー

ワークフローについてですが、勉強しつつなので効率悪いかもですがご了承ください。
使用言語・ツールは、

  • HTML/CSS
  • Sass/SCSS
  • jQuery
  • Sketch3
  • font awesome
  • font awesome animation

以上です。

サイトに載せる情報を書き出す

普段はEverNoteに書くのですが、何故か今回は手書きでノートに書きました。
デザインのラフ画も同じノートに書いていたので今回はこれで良かったかも。
こんな感じで結構適当ですww

あとあと入れたくなった情報は追加で入れています。

デザインのラフ画を描く

こんな感じで簡単なレイアウトとどんなエフェクト・アニメーションをつけるか書いています。
簡単なテキストも横に添えています。

スマホ中心でデザインしていきました。
もちろんPCでも綺麗にみれます。*見れるはず!!ww
むしろPCの場合はパララックスがうまく表示されます笑

原因はこちら

HTMLを準備

ここは簡単にHTMLで必要な要素などをツラーーーっと書いていきます。
あとあと必要なものが増えてごちゃごちゃしないように気をつけてます。

Scssで書いていく

正直あまりScssで書いたことが少なかったので、良い復習・練習になりました。(フロントエンドなのに、、、ごめんなさいww)
色や文字、フォント、レイアウトなどを作り込んでいきます。

ここで使ったものや問題発生時の備忘録はこちら



Sketch3でアイコンの作成

AboutページのSkillsの所のアイコンを自作しました。
Sketchには無料の素材がたくさんありますが、僕が必要だったアイコンが全部揃ってなかったし、複数の作者から素材をダウンロードするとデザインが統一されないので全部自作ですww
こんな感じ

font awesomeを導入

SNSアイコンだけのために入れるのはどうかなと思いましたが、入れちゃいましたww
font awesome animationと組み合わせてアイコンに動きをつけています。
超簡単です。

jQueryで動きをつける

巷では脱jQueryだという話も聞きますが、jQueryを使わせていただいております。
ごめんなさいww

文字がふわっと現れたり、スクロールするとメニューの背景色が変わったりするのをjQueryで行なっています。
実装している動きは以下

  • 1文字ずつ現れる文字
  • 文字が大きくなりつつ現れる
  • 文章がふわっと現れる
  • メニューの背景色を変える(PC)
  • スクロールで可視範囲にきた時に上の動きを実行
  • メニューボタンを押すとメニューが現れる(スマホ)

こんな感じです。
大体はCSSを変えたり、クラスをつけたりで動きを実現しています。
こんな感じです。



favicon・OGP設定

一応SNS上での表示もちゃんとされるようにOPG設定もしました。
簡単なファビコンもSketchで自作しました。超シンプルですがww

テストサーバーにアップロードして表示の確認

Chromeなどでスマホサイズの表示もできますが、実際にアップロードしてみるとちゃんと動かなかったり、表示されなかったりしたので「このハゲーーーーー!!」って何回かなりましたが、良い勉強になりましたww

その時の備忘録は上に載せています。最近の記事はそんなんが多いですww

本番サーバー(このブログの下層フォルダ)に配置

WordPressがインストールされているディレクトリに配置して良いのか、下層フォルダに入れて良いのか謎だったので、色々調べてローカル環境(MAMP)でも試しました。

いきなりMAMPが起動しなくなったので焦りましたww

以上で完成です〜
*ほぼww

まとめ

今回サイトを作ってみて勉強になることもたくさんありましたし、良い練習になりました。
途中で「コーディング楽しい!!」ってなったし、もっと色々作りたい・もっと良いものを作りたい、と思うようになりました。
svgアニメーションや、背景のアニメーション、スムーズな動きなどなど、これから色々試して行こうと思います。

では〜

Webのコトでお困りの方

ホームページの制作・修正・リニューアル等のお手伝い致します!!詳細はこちら

まずは下のリンクから気軽にご相談ください^ ^

SNSからのDMの方が早くレスポンスできます。