見出し画像

デイトラ 初級編DAY15〜DAY20 で学んだこと

まさ

デイトラの初級編DAY10〜DAY14で学んだことを簡単にまとめてみる。

DAY15〜20

いよいよポートフォリオの作成だ。
これが目的でデイトラに入ったと言っても過言ではない。

自分の学んだことの最終的なアウトプット程、力が付くものはないと思っているからだ。

ポートフォリオの目的は以下。

  • 自分ができることを伝えるため

  • 自分のスキルを伝えるため

  • 自分の仕事に対する想いを伝えるため

  • 自分の人柄を伝えるため

  • 自分の実績を伝えるため

Web上で常に公開している自分の履歴書かつWeb制作の実績みたいなものだな。

そしてポートフォリオの構成。

  • ファーストビュー（画像）

  • 自分について

  • できること

  • 実績

  • お問い合わせ

確かにいくつか見たポートフォリオサイトってこんな感じだな。
この中を自分ならどうするかってことか。

ポートフォリオの作成の流れは

  1. シンプルな構成の参考サイトを元にHTMLとCSSで作成

  2. テキストは自分の言葉に置き換える

  3. 画像や写真もご自身が所有しているものに置き換える（フリー素材の画像を使ってもOK）

  4. より魅力的なサイトになるようにブラッシュアップ

  5. サイトをインターネット上に公開

この中で１．と４が１番大変そうだな。
１番面白い所でもあるんだろうけど。

という基本を押さえた所で作成開始。
ここからは答えがないものを作る。

不安もあるけど、わくわくする瞬間だ。
さて、どうしようかな。

シンプルなサイトがいいな。
サイトそのものには色はあまり使わず、白を基調としよう。

自分のポートフォリオサイトの構成は

  • ファーストビュー（画像）

  • 自分の経歴

  • できること

  • スキル一覧

  • 制作物

  • お問い合わせ

って所だな。
ヘッダーも付けないと。

できること　＝　いわゆる提供サービス
だよな。

現時点で提供できることは、

  • LP作成

  • サイトの文言修正

  • GASでの業務改善ツール作成

くらいか。
もっとスキル身に付けないと。
堂々とWebサイトデザインとコーディングが可能と書けるレベルにならないとな。

スキルはせっかく学んだことを活かすからBootstrapのCard deckを使って並べてみよう。
自分のスキルが上がるのとスキルが増える（扱える言語が増える）度にこの欄が増えていくのはワクワクするな。

制作物はまだデイトラで学んだ2つしか置けない。
これは悔しい。
多分採用担当はこの手のやつは死ぬ程見てるはずだ。
いざ仕事を探す前には2〜3個くらいはオリジナルを作らないとな。

お問い合わせは現時点での実装方法はデイトラのショーヘーさんが記事を書いていたが実装できなかった…。
これは要改善だな。
でもこれでTwitterアカウントも載せれるぞ。

なんてことを考えながら作成。

概要はできたけどブラッシュアップしないと。

  • フォントをおしゃれなものに変えよう

  • 画像はすっきりシンプルに見えるものにしよう（結果2度差し替え）

  • 自己紹介はまだ教わってないけど記述リストで書いてみよう

  • 提供サービスは白基調に合うようにグレーっぽいアイコンにしよう

  • スキル一覧はどんなスキルがあるかを分かりやすくする為に、スキルのアイコンを置いて、各技術毎の現状のスキルを書いてみよう

  • お問い合わせはメールとTwitterだな
    できれば画像で表示したいな

  • 全体的に説明文が大きすぎ＆行間詰まっててイケてないから、文字を少し調整して行間も少しだけ大きくしよう

  • その他の文字も調整しないと
    クリックする文字は気持ち大きくなど

  • hタグをちゃんと階層構造に修正しよう

  • もちろん最後にレスポンシブ表示での確認と修正も忘れずに

って部分をブラッシュアップした。

その後デイトラで参考で教えてもらったギャラリーサイトをみると比較して今は意気消沈するけど、こういうのを沢山見て学ばないと。
デザインセンスはないけど、ある程度までならきっと勉強すればいけると思うし。
就職決まってお金入ってきたらデイトラのWebデザインコースも受講したいな。

何より大切なことがデイトラのDAY19の最後に書いてあった。

自分のスキルが向上するにつれて進化させていく

そうだよな、そういうことだよな。

現時点でのスキルではなく、学んだスキルをポートフォリオにどんどん盛り込んで採用担当の方や、案件を依頼するお客様への判断材料とするってことだよな。

そして最後はドメインを取得してサイトを公開。
これが苦戦した。

元々WordPressでブログを運営していたのもあり、ConoHaの契約があるので、そちらでやろうとしたのだが、デイトラに掲載されていたXserverとはフォルダ構成が異なる様で。

public_htmlとドメイン名のフォルダの順番がXserverとConoHaは逆だぞ…。

色々アップロード方法を試したものの、下記に配置することにした。
/public_html/ドメイン名フォルダ/

これで合ってるのか不安。

だが案の定サイトが見れない。
ここからが沼の始まりだった。

エラーを調べてみるとどうやらSSLの問題の様だ。

色々調べてみて

  • HTTPリソースの問題
    (html内にhttpsではなくhttpの記載やリンク先が存在している)

  • サーバー側のSSLの設定

の２つが可能性としてあった。

HTTPなんてhtml内に書いてる訳ないよと思ったものの、検索をかけるとなんとTwitterカードに書いた自分のURLがhttpになってる。
修正したものの、なんでだ？と思い、調べてみると、公開されてるもののhttpで公開されている…。

今度はサーバー側だと思い、ConoHaの管理画面でSSL設定を
ON→OFF→ON
に切り替え。
だがこれが死ぬ程時間がかかる。

特にOFF→ONは1時間以上かかるんじゃないか？
こんなもんなのか？汗

上記が完了してもサイトはhttpでの公開から変わらない。
「うーん、なんで…。」
と頭を悩ませはや4時間経過。

0時を過ぎた辺りでふと
「あれ、今見てるこのサーバーのアドレス、ブログURLの方のやつやん」
と気づく。

なぜ切り替えボタンがあることに気づかないんだ、俺…。
切り替えを押すと、ポートフォリオのURLが。

そしてSSL設定を見ると、
「OFFやんけ…。」
これが全ての元凶だったのか…。

ウキウキで
OFF→ON
にしたものの、また時間がかかる。

もう深夜1時だけど、これ確認するまでは寝れないよ…。
そして数十分後、設定がONに！

サイトを見ると無事httpsで公開されている！

凄い達成感だ！！
こんなに達成感を感じたことは久しくなかった。

ということでポートフォリオサイトの作成と公開完了。

今日の記事のTOP画はポートフォリオサイトのTOP画を使った。
ちょっとした自分への記念だ。

私のポートフォリオサイト、もし良かったらご覧ください。
まだ何も実績はないですがここから積み上げます！

https://masaka.online

この記事が気に入ったらサポートをしてみませんか？