![見出し画像](https://assets.st-note.com/production/uploads/images/28842837/rectangle_large_type_2_84ff4f94ab98814e17471fd1799a7afa.jpg?width=1200)
ポートフォリオを作成しました!
Webデザイナー/コーダーを目指している能野結季です。
コロナが流行っていて、大変な時期ですが、就活を再開するにあたって、もっと自分をアピールしたいと思い、作成しました!
(URLが多少見づらいですが、独自ドメインは後日取得します。)
最近、自身の制作スピードが上がって、上記のURLのコーディングであれば、8時間ほどでHTMLコーディングできます。
まだまだ改善すべき点はあると思うのですが、今の僕ができる限りの工夫を施しているので、ご覧いただけたら嬉しいです!
1.利用したツールやエディタについて
■Sketch(デザインツール)
デザインツールは「Sketch」を使用しています。
一言で表すと、IllustratorとPhotoshopのいいとこ取りツールと言ったところでしょうか。
・動作がとてもスムーズ
・シンプルな機能で扱いやすい
・打ち合わせが楽になる
Sketchのエクスポート機能がとても便利です。
保存した画像をSketchでエキスポートすることで、サイズ、表示形式を簡単に設定し、書き出すことができます。
■Unsplash(写真共有サイト)
僕は、サイトでクオリティの高い画像を使いたいので、Unsplashを使用しています。
Unsplashは、一定の品質をクリアし、かつ運営が認めたユーザーだけが投稿できる無料写真共有サイトです。
写真を3枚ご用意しましたので御覧ください。
このような高画質の写真が無料で使用できます!
さらに商用利用可ということで、僕はいつも利用させて頂いてます!
■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.最近の自分・まとめ
父のもとでコーディングを始めて2年くらいになるのですが、最近コーディングが楽しくなってきました。
たまに父が難しい課題を与えてくれるのですが、ゲームをしているようなわくわく感が出てきました。(自分でも不思議)
最初は、HTMLやCSSが理解できなさすぎて、勉強するのが本当に嫌でしたが、諦めず続けてきて、本当によかったです。
2年ほどコーディングをしてきて、コード慣れしたのか、自分からプログラミングを勉強するというありえない状況にも(笑)
以前、プログラミングはできないかも...と思っていたのですが、最近になって勉強してみると、理解できてる...と気づいたのです。
基礎レベルですが、嬉しかったです(笑)
■ロジカルシンキングを極めたい
今の課題はロジカルシンキングです。
父にも常日頃言われるのが、「思考が足りていない」です。
サッカーやゲームの事は、言われなくても思考しているのに、なぜか仕事になるとできない...
なぜだろうと考えて自分なりに答えを出してみると、本気度だったり、取り組む姿勢に問題があるのではないかと思います。
日々の勉強でも、及第点をとっているつもりですが、90点以上を目指さない=思考が止まる、のではないかと思います。
僕はまだ完璧に自分をコントロールできないので、一日の終りに、父と振り返りをしています。
そのトライで少しずつですが、思考することを続けれるようになりました。
技術、知識共にまだまだ成長できる点ばかりですが、経験を重ねて、社会に必要とされるスキルを持ったにん
まず就職できるようにがんばります!!
この記事が気に入ったらサポートをしてみませんか?