webサイト制作の勉強|2024年5月クラス用ブログ

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。フェリカテクニカルアカデミーは池袋にある求職者支援訓練の学校です。

Figmaとは

Figmaとは、ブラウザ上で動作するUI/UXデザインツールです。2016年にリリースされて以降、その使いやすさや豊富な機能から、多くのデザイナーに愛用されています。

Figma の特徴

ブラウザ上で動作する: インストール不要で、どこからでも作業可能です。
リアルタイムコラボレーション: 複数人で同時に同じファイル編集できます。
豊富な機能: ベクターグラフィック編集、プロトタイピング、デザインシステム構築など、幅広い機能が搭載されています。




www.figma.com


Figmaの仕様について

Figmaの構造は、大きく分けるとTeamとDraftsの2つのスペースに分かれています。

Team

Teamの中には「Project」さらにProjectの中に「File」が入っている仕組みです。Team内であれば複数人で共有することが出来ます。無料プランの場合、1つの「Project」、3つの「File」までという制限がついています。
Team自体は用途に応じて複数作成する事が可能です。

Drafts

Teamが複数のメンバーで利用できるスペースであるのに対して、Draftは自分だけが編集できる作業スペースです。Draftとは「下書き」という意味を持つ言葉である通り、作成したデザインを下書きとして保存できます。下書きを共同で編集したい場合には、Projectに移動させることで、共同編集できるようになります。


Figmaの料金プラン

Figmaには4つの料金プランが用意されています。
まずは無料の「スタータープラン」で充分です。



www.youtube.com


www.youtube.com



プラグインの追加

豊富なプラグインがあるのもFigmaのメリットの1つです。その中でもよく使うプラグインを実際に入れてみましょう。

  • 画像フリー素材集

https://www.figma.com/community/plugin/738454987945972471www.figma.com

  • アイコン素材

https://www.figma.com/community/plugin/1144676345861942963www.figma.com

  • 日本語フォント管理

https://www.figma.com/community/plugin/1222407847928087305www.figma.com



一部有料
  • 画像の背景を自動で切り取る

www.remove.bg

  • 1クリックでWebページをFigmaに変換

https://chromewebstore.google.com/detail/htmltodesign/ldnheaepmnmbjjjahokphckbpgciiaed?hl=ja

サイト制作のワークフロー

webサイト制作におけるワークフローの一例

ヒアリング

クライアントとのヒアリングの時点で、方向性やサイトの目的、そしてサイトに盛り込むコンテンツなどを明確にします。また、その事をクライアントとしっかりと共有する事が大事です。その為にはしっかりとクライアントのいう事に耳を向け、クライアントの要望を言語化する必要があります。

サイト設計

ヒアリングであがったコンテンツの洗いだしを行い、これらをグルーピングしフローチャートサイトマップディレクションマップ)と呼ばれるページの遷移の画面に視覚化し、まとめます。

ペルソナの設定

「ペルソナ(persona)」とは、サービス・商品の典型的なユーザー像のことで、マーケティングにおいて活用される概念です。
実際にその人物が実在しているかのように、年齢、性別、居住地、職業、役職、年収、趣味、特技、価値観、家族構成、生い立ち、休日の過ごし方、ライフスタイル……などリアリティのある詳細な情報を設定していきます。


ferret-plus.com



ラフデザイン・ワイヤーフレームの作成

各ページの画面に盛り込む内容を検討し、まずは手書きのラフで良いので、全体のレイアウトなどを考え、次にIllustrator等のソフトを使って「ワイヤーフレーム」と呼ばれる線画に起こします。

ラフデザイン

カンプ制作

カンプとは「comprehensive layout」が省略されたもので、「comprehensive」には「包括的な」「総合的な」といった意味があります。カンプの段階でカラースキム(配色計画)・寸法をしっかりと考えながら図面に起こし、デザインやレイアウトも含めた全体像を作ることで完成品のイメージを把握出来るものを作成します。いわばwebサイトの設計図です。


https://blogs.adobe.com/japan/web-design-photoshop-cc-basics-artboard/blogs.adobe.com


スライス(アセット 書き出し)・コーディング

webサイトの設計図であるカンプを元に細かくパーツ別に分けて、コーディングをしてサイトを組み立てます。


動的プログラムの導入

プログラムを導入する意図を明確にし、ユーザビリティーの高いサイトを作るよう心がけましょう。

検証

仮サーバーにアップして、リンクやユーザービリティなどを検証します。


プロトタイピングツール

最近はwebサイトを作成する際に、クリックしたらどうなるか、スクロールしたらどうなるか、というUI/UX部分を事前に共有するために、プロトタイプを作成する事が重要視されています。そういったプロトタイプを作成するツールが使用出来る事も求められています。
プロトタイプツールには色々なものがありますが、現状figmaが広く使われているので、まずはfigmaの使い方を覚えましょう。



www.figma.com


chot.design


book.mynavi.jp



実際の制作会社のワークフローを把握してみましょう。

baigie.me





baigie.me

background-attachmentを使ってパララックスを作成する

background-attachmentをfixedにすると簡単にパララックス(視差効果)を使ったスクロールが実装出来ます。
ただ、iOSはどういった理由か、この「background-attachment:fixed;」を頑なに対応させない為(ベンダープレフィックスを付けてもダメ)、iOSでは別の対応が必要になります。
今回はiOSではパララックス(視差効果)を使わずにシンプルに背景画像がスクロールしていく形で対応させます。


See the Pen
background-attachment:fixedでパララックス
by yachin29 (@yachin29)
on CodePen.

各ブラウザの対応


backgroundのショートハンド

background関連の指定は多いのでbackground-attachmentも含めてショートハンドでまとめてしまいましょう。

background: #FFF url() no-repeat center center/cover fixed;/* 背景色、背景画像、背景の位置、背景のサイズ、背景のスクロールの有無 */

iOSの対応

iOSSafariでは「background-attachment」は未対応のため、そのままでは表示が崩れてしまうので対応が必要です。ここでは「background-attachment:fixed」の値を「background-attachment:scroll」に変更するという非常にシンプルな方法で対応します。さらに高さを50vhほどに抑えておきます。

@media (max-width: 959px) {

.bg-1{
height: 50vh;
background: url() no-repeat center center/cover scroll;
}

}

今後のiOS

今後、iOSで「background-attachment」が対応されるのかは、解らないですが、AppleのDeveloper Forumsで「background-attachment」については以下のコメントで締められています。

Apple decided fixed background is not the vibe. That's all. Apple is god remember it


developer.apple.com

jQueryとCSSを使ったアニメーション

HTML5 × CSS × jQueryのハイブリッドアニメーション


最近のWebアニメーションはスマホで表示する事も考慮し、動きの軽いアニメーションが求められています。その為には単一のスクリプトではなく複数のスクリプトを合わせる必要があります。

jQueryの特徴の1つであるアニメーション機能を使うと、手軽にアニメーションを実装することができてとても便利です。しかし、jQueryによるアニメーションを多用すると処理がどうしても重くなります。
特にスマホなどでは、元々アニメーションがネイティブアプリのUIに多く使われているため、jQueryによるアニメーションがもっさりとした動きになる事が多いです。
jQueryのアニメーションは、通常CPUにより処理されています。CPUはアニメーションだけでなくコンピュータ全体の演算を担っているため、CPUでアニメーション処理を行うとどうしても処理が遅くなってしまいます。

CSS3の「transformプロパティ」を使用したアニメーションはGPUが処理を行います。GPU「 Graphcs Prosessing Unit」は画像の処理が得意なので、描画をGPUで行う事でCPUの負担が軽減され、結果としてページ全体の表示も早くなります。

jQueryとCSS3を上手く使うことで、滑らかで負荷のかからないアニメーションを制作しましょう。



プラグインを使ってハンバーガーメニューを作る

プラグインを使う事でハンバーガーメニューを簡単に作る事が出来ます。



jonsuh.com



アイコンの切り替えはjQueryでclass「is-active」をトグルさせるだけで良いので自身で記述してしまいましょう。


<button class="hamburger " type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>