フロントエンドエンジニアを目指している、まゆ（@Ymayu_it）です。
（名前を統一しようと思うので変更しました。）
もりけん先生（@terrace_tech）に今の状況を伝えると、
とアドバイスをいただきました！
figmaでデザインカンプを作成し実際にコーディングしたので記事でまとめていきます。
記事の流れ
- デザインカンプをfigmaで作成
- コーディング
目次
figmaでデザインカンプを作成
figmaでデザインカンプを作成することについてですが、figma？フォトショもイラレもよく分かっていないのに出来るかな…と不安でした。
figmaについて何が不明なのかを考えてみると、
- 特徴
- 使い方
だったのでこれについて調べてみました。
調べたので以下の流れでまとめていきます。
- figmaの特徴
- ふるさんの動画でfigmaの使い方を学ぶ
- 実際に使ってみて
まずはfigmaについて。
figmaの特徴について
figmaの特徴は以下のとおりです。
- 2人までなら無料で使える
- 初心者でも簡単に扱える
- 軽くてはやい
- グループでデザインを共有できる
- グループで共同でデザインを作成することができる
無料と有料がありますが無料だけでも
- 3つのプロジェクト
- 30日間のバージョン履歴を残せる
- 編集者は最大2人まで
- 無制限のクラウドストレージ
- 無制限の無料視聴者
など使えることが豊富です。
しかし最大の欠点は英語が多いこと…英語スキルが乏しくGoogle翻訳を使って読んでもイマイチ…
そこで使い方について日本人の方が解説していないかと調べてみると、ふるさん（@guutenx）の動画を発見！
ふるさんのyoutubeでfigmaの使い方を学ぶ
この動画では、
- figmaの登録方法
- フレームを作成しデザインを作成していく
など大まかな流れを実際にレクチャーしながら教えてくれます！
またfontawesomeの導入の仕方も教えてくれるので、5分の動画で簡単なものではありますがデザインカンプを作成することができました！
簡単なものでデザインカンプ作成
とても簡単なものですがデザインカンプを作成しました！
やたらアイコンを使っていますが…笑
figmaによって、
- height値がわかりやすい
- 色分けができるのでブロック分けで作成しsectionで固めやすい
- 半日で簡単なものが作成できる
- 1日で非常に簡単なLPが作れる
などが個人的な感想です。
実際にデザインカンプを作ったので次はコーディング作業。
コーディングで気をつけたこと3つ
コーディングのときに気をつけたことをまとめていきます。
しまぶーさんの動画でgrid-templateを参考に作成
この動画でgrid-templateを知って、使い方を知っていると幅が広がる気がすると思いこちらもコーディングで簡単なものですが使用しました。
実際にコーディングのときに余白部分もgrid-templateで入れては見たものの何度やってもうまくいかず…
css
display: grid;
grid-template:
"... ...... ..." 40px
"... header ..." 90px
"... ...... ..."
"... main ..." 370px
"... ...... ..."
"... service ..." 700px
"... ...... ..."
"... footer ..." 100px
"... ...... ..."
/ auto minmax(300px, 1fr) auto;
こちらで結局作成しました。
htmlの書き方やwidth部分の書き方がよくなかったのかな…と悩みながらですが一度簡単なものから作成し、次はしまぶーさんのようにもっと複雑なものができるようにしていこうと思いました。
hoverで色を変える
LP制作のときにお世話になったhover。
hoverでマウスカーソルを合わせたら色が変えるようにしました。
またデフォルトの色を避けるためにlinkやvisitedも色を#333333のグレーに。
記述の順番を間違えると対応してくれないので、
- link
- visited
- hover
- active
上記の順番を横に置いてコードを書きました。
この流れの意味はスタイルシートは一番下にあるものを優先するという点がポイント。
| 行動 | ||
| ①link | 未訪問 | |
| ②active | クリック中 | hoverを打ち消すため hoverより上 |
| ③hover | マウスカーソルがあたっている状態 | |
| ④visited | リンクを訪れた状態 | activeもhoverも打ち消すため activeとhoverより下 |
これを意識しました！
意味を知っていると調べずに流れるようにコードが打てることがここで分かった気がします…！
きれいなコーディングを意識
他の人のコードを見たり、実際に写経をしてみて分かったことがあります。
親要素がひと目見てわかりやすいこと。
全て正解は無いと思いますが、親要素が誰の目で見てもわかりやすいのは盗もうと思い今回実際にコードを打ちました。
親要素をsectionにして子要素でdivを使うと自分で後からみても読みやすかったです。
html
<body>
<section class="header">
<div class="container">
<h1>
<a href="#">
山田 麻由
</a>
</h1>
<div class="icon-nav">
<ul>
<li><a href="#"><i class="fas fa-user-alt fa-2x"></i><a></li>
<li><a href="#"><i class="fas fa-yen-sign fa-2x"></i><a></li>
<li><a href="https://nekoranon.com/"><i class="fas fa-blog fa-2x"></i><a></li>
<li><a href="#"><i class="fas fa-envelope fa-2x"></i></a></li>
<li><a href="https://github.com/syouyu-mayo"><i class="fab fa-github fa-2x"></i></a></li>
<li><a href="https://www.facebook.com/ma.yu.391420"><i class="fab fa-facebook fa-2x"></i></a></li>
<li><a href="https://www.instagram.com/y._.mayu8/"><i class="fab fa-instagram fa-2x"></i></a></li>
<li><a href="https://twitter.com/Ymayu_it"><i class="fab fa-twitter fa-2x"></i></a></li>
</ul>
</div>
</div>
</section>
<section class="main">
<div class="container">
<amp-img
src="img/mayu.png"
width="300"
height="300"
hspace="5"
alt="山田麻由">
</amp-img>
<div style="line-height: 5;" class="text">
<p>
人とのつながりから生まれた
<br>
温かな想いを形にして発信できる
<br>
お手伝いができればと考えています。
</p>
</div>
</div>
</section>
<section class="service">
<h2>Service</h2>
<div class="content">
<div class="content">
<div class="heart">
<div class="icon">
<i class="fas fa-heart fa-8x"></i>
</div>
<div class="text">
<p>
病院管理栄養士として約2年勤務し、陰陽五行説を取り入れたマクロビオティックカフェで1年勤務（アレルギー代替食対応）した経験を生かし、食事のアドバイスをさせていただいております。
</p>
<p class="small" style="font-size: 12px;">
※離乳食教室やアレルギー食などの経験があります。
</p>
</div>
</div>
<div class="web">
<div class="icon">
<i class="fas fa-desktop fa-8x"></i>
</div>
<div class="text">
<p>
コーディングを使ったサイトをメインにクライアント様の目線で制作することを心がけています。ユーザーが見やすいようなスマートフォン・タブレット対応もしております。
</p>
<br>
<p class="small" style="font-size: 12px;">
※SEOなどWebマーケティングは対応しておりません。
</p>
</div>
</div>
<div class="star">
<div class="icon">
<i class="fas fa-star fa-8x"></i>
</div>
<div class="text">
<p>
性格やライフスタイルから西洋占星術や人相などから導き出し、もともとの弱い部分や今の体調にあった食事のアドバイスを占い視点でさせていただいております。
</p>
<br>
<p class="small" style="font-size: 12px;">
※科学的根拠は無く占いであることを
ご理解いただける方のみ鑑定させていただいております。
</p>
</div>
</div>
</div>
</div>
</section>
<section class="footer">
<div class="container">
<div class="nav">
<ul>
<li><a href="#">Profile<a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="copyright">
<p class="small">© Mayu Yamada All rights reserved.</p>
</div>
</div>
</section>
</body>
こちらが実際のコードです。
まだまだ改善するところもありますが、以前よりは見やすくなったと思います。
完成したもの
デザインカンプで作成したものと違います！
理由はいろいろコードを打ちながら調べながらしていくと、試してみたいことや「こっちのほうが良い」と思ったからです。
こうなるといけないからデザインカンプをしっかり作成する必要があるんですね…脱線してしまう…笑
デザインカンプの重要性やコードを打つために必要なものが以前より分かったので、もりけん先生のアドバイスを聞いて作ってみてよかったー！＞＜
おわりに
5月から始めたコーディングですが全然楽しさを見いだせなくて。
何が楽しいんだろう？って思って試合放棄をしていました。
ただエンジニアになった友人のコードを打つ楽しさを教えてくれたので今は時間を忘れて打つ事ができてきているので良かったです…！
今日はレスポンシブ対応ー！
もりけん塾（@terrace_tech）
Thanks：もりけんさん