2021年は「1か月1サイト自主制作チャレンジ」に取り組んでいます！
その第三弾として、3月は「フェイクグリーン専門店」のWebサイトを制作しました。
こちらは、PENGIN（旧：クリ★スタ）様という学習系サイトにて配布をされているXDカンプを基にコーディングを行ないました。
作品やGithubリポジトリへのURL、今回の作品のアピールポイントや改善点などを書いていきます。
概要
・今回の作品はこちら！
「フェイクグリーン専門店」
https://aoi719.github.io/Portfolio_personalWorks/03/cresta/index.html
・自主制作用リポジトリはこちら！
https://github.com/Aoi719/Portfolio_personalWorks
※今後もこのリポジトリに作品を投稿していきます！
冒頭にも記載した通り、今回はPENGIN（旧：クリ★スタ）様が制作・配布されているデザインカンプ（XD）を使用させていただきました。
ただし、画像やテキストについては、私が別途選定・制作したオリジナルのものに変更しております。
カンプコーディングなので本来は画像やテキストもそのまま使用するべきなのですが、今回はポートフォリオ掲載を前提としたコーディングであったことと、この課題に取り組んだ方々が同じデザイン・テキストのサイトをアップされているので、差別化の意味も込めて変更させていただいています。
※コードやデザインの改変は自由とのことでした。詳細は、PENGIN（旧：クリ★スタ）様の元記事をご確認くださいませ。
使用言語・素材サイト
制作にあたり使用した言語やライブラリ・素材サイトなどをご紹介します。
使用した言語・ライブラリ
- HTML
- Sass(SCSS)
- jQuery
今回は、Vanilla JSではなく、すべてjQueryを使用しています。
画像素材
- pixabay
余談：なぜ「フェイクグリーン専門店サイト」だったのか？
私は2020年の6月ごろに、自宅の勉強環境を整えるべくデスクとチェアを購入しました。
その際に、デスク上の装飾や作業中の癒し的なものを目的に、いくつかフェイクグリーンを買いました。（そのうちの2つは、Twitterのアイコンに写真を使用しています。）
あまり高価なものは買えないので、100円ショップで揃えました。安物ではありますが、ふとした瞬間に目に入るとなかなか落ち着くものです。
本物の観葉植物にしなかったのは、虫が発生したりすると嫌だからです（笑）。
そういった経緯からフェイクグリーンに興味を持っていて、雑貨店に行って見つけたときは少し手に取ってみたり、家ではPinterestで観葉植物系の画像収集などをするようになりました。
そこで、自主制作のサイトでフェイクグリーンの専門店のサイトを作ろうと思い立ちました。最初は自分でデザインも考えようとしていましたが、デザインは苦手でキツく(笑)、どうしようかと思っていました。今回カンプコーディングをさせていただく際に、そのコンセプトを取り入れさせていただこうと思い、フェイクグリーン専門店というコンセプトになりました。
jQueryの使用箇所
ハンバーガーメニュー
今回の一番の鬼門だったハンバーガーメニューです。
HTML
<header class="header">
<div class="spHeader">
<div class="logo">
<h1>
<a href="index.html"><span lang="en">Calm</span> －カルム－</a>
</h1>
</div>
<!-- ハンバーガーメニュー用ボタン -->
<button type="button" class="hamburger pc-hide">
<span class="menu_line"></span>
</button>
</div>
<nav class="menu">
<ul>
<li><a href="index.html#concept" lang="en">Concept</a></li>
<li><a href="index.html#service" lang="en">Service</a></li>
<li><a href="index.html#works" lang="en">Works</a></li>
<li><a href="contact.html" lang="en">Contact</a></li>
</ul>
</nav>
</header>jQuery
let $win = $(window);
$win.on('load resize', function () {
let windowWidth = window.innerWidth;
if (windowWidth <= 769) {
$(function () {
$('.menu').hide();
$('.hamburger').click(function () {
$('.menu').stop().toggle(300);
});
});
}else{
$('.menu').show();
}
});まずはinnerWidthで表示幅を取得し、タブレット以下のブレイクポイント（769px以下）のときに、ハンバーガーメニューのボタンが出現するよう制御しています。
表示幅が769px以下の場合、最初はhideメソッドで.menu（メニューバー）を非表示にしておき、ハンバーガーボタン（.hambruger）をクリックした場合に.menuを開閉します。
769px以上の表示幅では、.menuは常に表示されます。
.toggle()を使用していますが、最初に実装した時はボタンを押すと何度も開閉を繰り返してしまい、思った挙動になりませんでした。
調べてみると、.toggle()の前に.stop()を付加することで繰り返し動作を止めることができるとわかりました。.stop()を後ろにつけてしまうと.toggle()のモーション自体が止まってしまうので、それもうまくいきませんでした。
ただし、この.stop()が影響していると考えられる課題も見つかっているので、そちらについては後述します。
メインビジュアルスライダー
製作元のPENGIN（旧：クリ★スタ）様ではslickを使って実装されているようです。
しかし私は今回、背景画像を装飾と捉え、background-imageで実装のうえでスライダーの挙動を付けたいと思いました。（1月の自主制作でslickは使用したので、別のものを試したいという気持ちもありました。）
調べてみると、bgswitcherという背景画像のスライダープラグインがあることが分かったので、今回はそちらを使用しています。
↑こちらのGithubからダウンロードできる「jquery.bgswitcher.js」を使用しています。
サイトコンセプトとしては植物を取り扱っており、ゆったりとした印象があると思いましたので、動きが大きくなるスライド（横や上下に写真が滑るように動く挙動）ではなく、フェードアウト・フェードインでスライドを表現しています。
スクロールによるヘッダーの背景色変更
今回使用させていただいたカンプでは
「スクロールでメインビジュアルを通り過ぎたときにヘッダーに背景色を付ける」
という指示が組み込まれていました。
そのため、こちらもjQueryでスクロールで到達した要素を取得して、その要素を通り過ぎたあとは背景色を付けておく、という挙動をさせています。
HTML（ハンバーガーメニューの解説と同じ個所です。）
<header class="header">
<div class="spHeader">
<div class="logo">
<h1>
<a href="index.html"><span lang="en">Calm</span> －カルム－</a>
</h1>
</div>
<!-- ハンバーガーメニュー用ボタン -->
<button type="button" class="hamburger pc-hide">
<span class="menu_line"></span>
</button>
</div>
<nav class="menu">
<ul>
<li><a href="index.html#concept" lang="en">Concept</a></li>
<li><a href="index.html#service" lang="en">Service</a></li>
<li><a href="index.html#works" lang="en">Works</a></li>
<li><a href="contact.html" lang="en">Contact</a></li>
</ul>
</nav>
</header>
.
.
.
<!-- ～～中略～～ -->
.
.
.
<!-- Concept -->
<section class="section concept" id="concept">
<div class="container">
<h2 class="dark" lang="en">CONCEPT</h2>
.
.
.
<!-- ～～以下略～～ -->CSS（必要な箇所のみ抜粋。実際はSCSSで記述しています）
.hDark {
background-color: #282f35;
}
jQuery
$(function () {
let header = $(".header");
let concept = $(".concept");
let offset = concept.offset().top;
$(window).scroll(function () {
let scroll = $(this).scrollTop();
if (scroll > offset) {
header.addClass("hDark");
} else {
header.removeClass('hDark');
}
});
});まずはHTMLから「header」と「concept」というクラス名がついた要素をそれぞれ取得し変数に格納します。
※私の例ではheaderはそのままヘッダー全体、conceptというのはメインビジュアルの次の要素（つまりヘッダーの背景色をここから変えたい、という要素）です。
そしてjQueryの.offset()を使用して、conceptという要素の座標を取得し、返ってきた値を変数offsetに代入します（.topを連ねることで、ページのトップからの座標を取得しています）。
あとはscrollイベントを使用して、headerがconceptのところまでスクロールされた際には「hDark」という色を付けるクラスを付与し、conceptに到達していない段階ではhDarkを外す、という処理を行なっています。
※参考ページ
http://backyard.in4design.jp/2017/10/blog-post.html
学べたこと
XDカンプからの数値の取り方
XDカンプから数値を取り出してコーディングをする方法を学べました。
特にline-heightやletter-spacingの計算、要素間の距離などを調べつつ取り、実装していきました。
これらの数値の取り方については、詳しくまとめられている記事などもあったりしますので、そちらを拝見しつつ実装していきました。
※参考ページ
https://haniwaman.com/xd-coding/#i
https://yuyauver98.me/xd-line-height/
bgswitcher
背景画像をスライドさせるjQueryプラグインの発見です。
切り替わるまで・切り替わりにかかるそれぞれの秒数をしっかり指定できたり、スライド方法もいくつか選択肢があったり、自由度はそれなりにあるかなと思いました。
ただ、個人的には無理にこれを使わなくてもいいかも、という感想も同時に持ちました。
調べた限りでは、滑っていくようなスライドを指定する際に横に動かす記述が見当たらず、縦に滑っていくスライドしか指定ができなさそうでした。今回、サイトコンセプトとの相性的にもfade（フェード）がしっくりきてそちらを使用したため問題はなかったのですが、横にスライドさせたい、となった場合は使用が難しそうな印象でした。
今回はあくまで装飾の背景画像という観点でこちらのプラグインを使用しましたが、背景画像でなければいけないという縛りがない限りは普通にimgタグで実装して、slickなど別のスライダープラグインの使用で十分かなと思います。
ショートハンドプロパティを意識して使うことで、知識の定着を狙った
今回はfontプロパティやbackgroundプロパティなどのショートハンドプロパティで、自分が普段あまり積極的には使用しない部分の記述まで実装してみることで知識の定着を図りました。
fontプロパティはそもそも使用自体あまりしたことがなく、なじみのないプロパティだったので積極的に使用しました（といっても使用する場面はそこまで多くはないので何とも言えないですが）。
backgroundプロパティについては、私はcolorやimageなど単体で指定することはよくありますが、これまで複合的な指定はあまりしてきませんでした。そのため、image・repeat・position・sizeなどいつもは分けて指定していたプロパティも意識的にショートハンドで実装するよう努めました。
結果として、今まで持っていた苦手意識的なものはかなりなくなったかな、と思います。それでも完璧に何も見ずに書くのはまだ難しく、ググりながらになり余計な時間をかけてしまっているので、必要な時にサッと使えるようこれからもガンガン書いていきたいと思います。
工夫したこと
コーディング面
コーディング面では、CSSをSCSSで書いています。
SCSSでは変数が使用できるので、テキストカラーやフォントサイズなどは基本的に変数に格納して使用するようにしました。そうすることで、仮に運用中にカラーを変更したいとなっても、変数の中身だけを変えればよいという運用上のメリットも考えられたかと思います。
フォントサイズについては基準のサイズを1emとし、見出しやリード文などの使用箇所に応じてcalcでpx加算しています。そうすることで、基準サイズ（1em）がブラウザや拡大率などによって変わったとしても、文字のジャンプ率などが大きく変わってしまわないような工夫をしています。
デザイン面
カンプコーディングなので、まずはレイアウトは忠実に再現することを心掛けました（画像やテキストはオリジナルなので除きます）。
そしてもう一点。サービスのセクションで、画像をオリジナルのものに差し替えた影響で、文字色と背景色が同系色になってしまいました。
それにより文字の可読性が落ちてしまったため、文字の背景に透明度のある黒系の色を敷き、可読性を高める工夫を行ないました。
今後の課題
一旦発表はしましたが、まだ残っている課題もあります。
ハンバーガーメニュー
現時点ではまだハンバーガーメニューの挙動が不安定です。
たとえば
- トップページでメニューをクリックしたときに、メニューが出っぱなしになる
- バーが動かない（開く前は3本線→メニューを開いたら×になる、等）
- PCでブレイクポイントを切り替えたときに動かなくなる（再読み込みすれば動く。.stop()が原因…？）
- ページ遷移時に一瞬メニューが見えてしまう
等の問題を抱えたままだったりします。
これらは大きな課題なので、クリスタ様の解説なども参考にしつつ、これから修正していきます。
CSS（SCSS）
コメントも含め、コンパイル後のCSSの可読性を考えたコーディング
SCSSは、コメントを2種類書くことができます。
- /**/ → コンパイル後のCSSにも出力されるコメント
- // → コンパイル後のCSSには出力されないコメント
この2種類を使い分けるなど、コンパイル後のCSSも整理されるように書くということがうまくできていないな、と思います。
もちろんコメント以外の部分も、さらにスマートな書き方ができる部分も多いのだろうな、と感じています。改善案としては、自分の知っている範囲の知識だけで考えてコーディングをするという部分からはいったん離れて、写経やコード分析などのフェーズを挟んで他の方が書いたコードに触れる機会を増やしていくということが考えられます。そうした時間も今後設けていこうと思います。
CSS Combの設定の見直し
こちらはあまりコーディング技術面の話ではありませんが、CSSおよびSCSSはCSS Combをフォーマッタにしています。
ただ設定がうまくいっていないのか、@includeの後ろにもプロパティの記述が回ってしまうことがあります。
例（letter-spacingは@includeの外の記述なのですが、@includeの後ろに入ってしまって可読性が悪くなっています。）
h2 {
font-size: $section-title-fz;
font-style: italic;
@include lg {
font-size: $lg-section-title-fz;
} letter-spacing: .1em;
}
こちらの設定を見直すべきかなと思っています。
まとめ
今回は初めて、XDで作成されたカンプからの コーディングにチャレンジしました。
課題が残っているとはいえ、学べたこともとても多かったです。今後修正で課題を解決していければと思っています。
4月は元々、UdemyのPHP講座で学んだことを使ってRSS閲覧ページを作ろうと思っていました。ですが少し予定を変更して、ポートフォリオサイトの制作に入っていこうと思います。
ポートフォリオサイトについては、訓練校時代のものとは違い、今後長く使用でき、かつ個人としてのスキルの売り込み要素としても活用できるものにしたいと思っているので、多少4月をオーバーしたとしてもしっかり力を入れて作りたいと思っています。完成したら、またブログで紹介したいと思います。
ここまで読んでいただき、ありがとうございました。
コメント