見出し画像

ポートフォリオを作成しました！

Yuki

Webデザイナー/コーダーを目指している能野結季です。
コロナが流行っていて、大変な時期ですが、就活を再開するにあたって、もっと自分をアピールしたいと思い、作成しました！

（URLが多少見づらいですが、独自ドメインは後日取得します。）

最近、自身の制作スピードが上がって、上記のURLのコーディングであれば、8時間ほどでHTMLコーディングできます。
まだまだ改善すべき点はあると思うのですが、今の僕ができる限りの工夫を施しているので、ご覧いただけたら嬉しいです！

1.利用したツールやエディタについて

画像2

 ■Sketch（デザインツール）

デザインツールは「Sketch」を使用しています。
一言で表すと、IllustratorとPhotoshopのいいとこ取りツールと言ったところでしょうか。

・動作がとてもスムーズ
・シンプルな機能で扱いやすい
・打ち合わせが楽になる

Sketchのエクスポート機能がとても便利です。
保存した画像をSketchでエキスポートすることで、サイズ、表示形式を簡単に設定し、書き出すことができます。

■Unsplash（写真共有サイト）

僕は、サイトでクオリティの高い画像を使いたいので、Unsplashを使用しています。
Unsplashは、一定の品質をクリアし、かつ運営が認めたユーザーだけが投稿できる無料写真共有サイトです。

写真を3枚ご用意しましたので御覧ください。

画像3

画像4

画像5

このような高画質の写真が無料で使用できます！
さらに商用利用可ということで、僕はいつも利用させて頂いてます！

■Visual Studio Code

エディタは「Visual Studio Code」を使用しています。
今までは「Brackets」というエディタを使用していたのですが、Visual Studio Codeを使用すれば、コンパイルがエディタ内で完結できる、と言う理由で変更しました。

CSSの概念を理解した上で、僕はSassというメタ言語を使用しています。
ちなみにSassを使う主なメリットは
・作業効率アップ
・コードの記述量が減る
・コードのメンテナンス性向上

Sassでコーディングして際に、書いたコードを、CSSにコンパイル（変換）しなければなりません。
そのため僕は、エディタとコンパイルツールを分けて作業していました。
ですが、別画面になり作業スピードが落ちるので、色々調べていたところ、
「Visual Studio Code」なら一つで完結できるということで変更しました。

方法はとても簡単で、プラグイン（拡張機能）を使うだけで、できました。
もっと早く使えばよかったです...

■Bootstrap（HTML＆CSSのフレームワーク）

HTML＆CSSの作業効率をグーーーンと上げてくれる、フレームワーク。
予め用意されたクラスを使うことで、自分でコーディングする必要が無くなる、とても便利なツールです。

ページのデザインや、用途に合わせて、テンプレートに自分で付け足していくので、自分で書く力が備わってこそ発揮されるものだと教わりました。
そこそこ扱いになれてきたのですが、まだBootstrapにあるクラスを見落としていて、自分で作ってしまう事があるので、注意したいです...

■BEM

BEMとは厳格なclass名の命名ルールが、特徴的なCSS設計方法の一つです。
僕も深くは理解していないのですが、数人でプロジェクトを進めていると、他の人がコーディングしたものを触らないといけない状況があります。
その際に、このBEMの規則に従ってHTMLを書いていれば、他の人が理解しやすいということです。
僕は実際にチームで作業した事が、ないのですが、仕事で役立てるように、使用しています。

下記のようなクラス名の付け方で、何をしているか一目で理解することができます。

<div class="box">
    <div class="box__child">
        //boxの子供
    </div>
    <div class="box--child">
        //boxの性質を変えたい
    </div>
</div>

■Sourcetree・Bitbucket・Netlify

これらのツールを使うことで、Gitの操作ができ、ファイル管理・共有を簡単で安全に行い、サイトを公開できます。
Gitでファイル管理は初心者には難しいとされているのですが、この
「Sourcetree・Bitbucket・Netlify」を使えば、僕でも管理することができました。

サイト公開には、静的なサイトを超高速で提供できるWebサービス「Netlify」を採用。こちらも初心者に優しいホスティングサービス。
わずか3ステップで使用可能な上、無料とは思えないパフォーマンスの高さ。更新や修正は、Gitリポジトリにpushするだけで継続的デプロイを行います。

大まかな手順は以下のとおりです。
1.Bitbucketログインして、新規リポジトリを作成
2.Sourcetreeでクローンを作成
3.作成したクローンに、リポジトリを読み込ませる
4.作業完成次第、Netlifyを使って公開。

2.最近の自分・まとめ

画像6

父のもとでコーディングを始めて2年くらいになるのですが、最近コーディングが楽しくなってきました。
たまに父が難しい課題を与えてくれるのですが、ゲームをしているようなわくわく感が出てきました。（自分でも不思議）

最初は、HTMLやCSSが理解できなさすぎて、勉強するのが本当に嫌でしたが、諦めず続けてきて、本当によかったです。
2年ほどコーディングをしてきて、コード慣れしたのか、自分からプログラミングを勉強するというありえない状況にも（笑）

以前、プログラミングはできないかも...と思っていたのですが、最近になって勉強してみると、理解できてる...と気づいたのです。
基礎レベルですが、嬉しかったです（笑）

■ロジカルシンキングを極めたい

今の課題はロジカルシンキングです。
父にも常日頃言われるのが、「思考が足りていない」です。

サッカーやゲームの事は、言われなくても思考しているのに、なぜか仕事になるとできない...

なぜだろうと考えて自分なりに答えを出してみると、本気度だったり、取り組む姿勢に問題があるのではないかと思います。
日々の勉強でも、及第点をとっているつもりですが、90点以上を目指さない＝思考が止まる、のではないかと思います。
僕はまだ完璧に自分をコントロールできないので、一日の終りに、父と振り返りをしています。
そのトライで少しずつですが、思考することを続けれるようになりました。

技術、知識共にまだまだ成長できる点ばかりですが、経験を重ねて、社会に必要とされるスキルを持ったにん

まず就職できるようにがんばります！！

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