WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

オブジェクトの操作

オブジェクトとは、関連するデータや 機能の集合体です。JavaScriptには多くのオブジェクトが用意されています。これを目的別に使っていきます。

  • documentオブジェクト(ファイル関連のデータを操作する)
  • windowオブジェクト(ウィンドウ関連のデータを操作する)
  • dateオブジェクト(日付や時間関連のデータを操作する)
  • mathオブジェクト(演算処理などをする)

基本的なオブジェクト操作を覚える

window.document(ブラウザに文字を表示させる)

JavaScriptで文字列を表示するには、「window.document.write( )」を使います。
表示したい文字列をシングルコートではさみます。「window.」は省略できます。

document.write( 'Hellow World!!' );

ダイアログボックスを表示させる

ダイアローグ(英: dialogue、米: dialog)は、英語で対話を意味する。映画などの脚本における対話の台詞の意味でも用いられる。対義語はモノローグ。


window.alert(警告ダイアログに表示させる)

 alert( 'Hellow World!!' );

window.confirm(確認ボックスを表示する)

confirm( '保存しますか?' );

window.prompt(ユーザーに文字を入力してもらう)

ユーザーに文字や数字を入力してもらい、それを「戻り値」として受け取ることが出来ます。

prompt( '金額を入力して下さい' );

入力した値を変数に代入する

<script>
let name = prompt('名前を入力してください');
document.write(name);
</script>

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


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

jQueryのアニメーションはカクカクでちょっと重い

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


CSSのtransfromは早くて滑らか

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









プラグインを使ってみる

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



jonsuh.com


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

<p class="hamburger " id="btn">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</p>

JavaScriptとは

プログラムとは?

いよいよJavaScriptの授業が始まります。人によっては今回のJavaScriptがプログラムに触れる初めての機会になる場合もあります。
プログラムという物を触った事が無い人はまず、「プログラム」という物がどういう物なのか、という事を理解しましょう。

プログラム

コンピュータプログラム(英:computer programs)とは、コンピュータに対する命令(処理)を記述したものである。コンピュータが機能を実現するためには、CPUで実行するプログラムの命令が必要である。プログラミング言語と呼ばれるコンピューターのための言語。

要はコンピューターに命令し、動かす為に使う物(言語)です。


機械語


本来、コンピューターは機械語と呼ばれる、0と1のみで構成されている言葉で動くように設定されています。しかし、人間が機械語を使ってコンピューターに命令するのは人間側に負担が多いので、人にとって比較的使い易い「プログラム言語」を使ってコンピューターに命令していきます。


プログラム学習

2020年以降、プログラミング教育が小学校で必修化されます。現在IT業界が抱えている問題として、今後さらにIT化していく社会に対しWebエンジニアをはじめとするIT人材の不足があります。
しかし、小学校のプログラミング教育は「プログラマーの育成」が目的ではありません。小学校段階におけるプログラミング教育の目的は、プログラミング言語の使い方を覚えることで無く、文部科学省は、プログラミング教育を通じて育成すべき資質・能力を「プログラミング的思考」という言葉で表現しています。

この事は初学者にとってのこのクラスでのプログラム授業と同じで、まずは「プログラミング的思考」を理解する事を目標にしましょう。

ChatGPT

今巷で流行っている「ChatGPT」のような大規模言語モデルのAIも、指示の仕方次第で生成されるコンテンツにとても差が出てしまいます。AIに適切な指示を出せるかは、当の人間がどれだけ「プログラミング的思考」を理解しているかによります。




Javascriptとは

JavaScriptとは、米Netscape Communicationsによって開発されたスクリプト言語です。JavaScriptは主にWebブラウザ上で動作します。クリックすると画像が変わったり、要素が消えたり、現れたりというHTMLやCSSでは出来ない、いわゆるサイトの動的な部分を担当しているスクリプト言語です。
Webサイト・Webアプリ・バックエンド・デスクトップアプリ・モバイルアプリなど、ブラウザからサーバー、デスクトップからスマートフォンまで使用場面は多岐にわたっています。

それどころか、今やJavaScriptは宇宙船のUIにも使用されています。
note.com


JavaScriptと似た名前のプログラミング言語に「Java」というものがありますが、まったくの別物です。なので混同しないようにしましょう。


スクリプト言語

JavaScriptスクリプト言語です。ではスクリプト言語とはどういうものか?
簡単に言うとスクリプト言語とは簡易版のプログラミング言語で、特に実行環境を整える必要も無く、ソースコードをその場で順を追って解釈する「インタープリタ方式」の言語です。

プログラム初学者にとっては特に難しい設定をしなくて済み、手軽に使えるのがこのJavaScriptです。


なぜJavaScript?


freelance-start.com



www.rstone-jp.com


image.itmedia.co.jp



主なJavaScriptフレームワークやライブラリー

AngularJS

React

Vue.js

jQuery

また、サーバーサイドでJavascriptを動かす事が出来る「node.js」やSNSとの通信で使用する「JSON」などjavascriptはとにかく汎用性が高く、便利な言語です。

JavaScriptで出来る事

演算処理

プログラミングの基本である演算処理。単純な四則演算のほか、三角関数や円周率等を使用したり、年齢を算出したり、日数を割り出したりなど、さまざまな用途で使用します

ドキュメント操作

Webページに文字を表示したり、非表示にする。文字や背景の色を指定する。 Webページを切り替える、など、html内のドキュメントを操作する事が出来ます。

マウス等のイベント処理

クリックやマウスオーバー、Webページそのものロード時など、その他様々なタイミングで処理を行わせることができます。
サムネイル画像をクリックすると大きい画像が表示されるようなものから、メニュー項目をクリックすると下の階層のメニューが開くようなナビゲーションまで、このようなイベント処理を行っています。

DOMを使用した処理

DOM(Document Object Model)を使用することで、HTML文をツリー構造のように扱うことができます。
これを上記のイベント処理等と組み合わせて使用することで、サイト内に新しいコンテンツを挿入したり、書き換えたり、削除することが出来ます。

jQueryとは?

jQuery(ジェイクエリー)とは、2006年1月にリリースされた、ウェブブラウザー用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。様々な場面で活用されており、JavaScriptライブラリのスタンダードと呼ぶ者もいる。

jQueryの特徴

jQueryの現状

qiita.com



配色のルール

配色には色々なルールがありますが、まずはこの3つを覚えましょう

1、コントラスに気を付ける

2、色数を抑える

3、トーンを合わせる


HSBを使った配色

photoshopではRGB以外にもHSBやLabといった数値でも色の調整が出来ます。特にHSBは配色時によく使うので是非覚えておきましょう。
HSBは色相(Hue)、彩度(Saturation)、明度(Brightness)の3つの値を調整していきます。

トーン(色調)を合わせる方法

トーン(色調)とは彩度と明度の2つの値を合わせた物です。なので上記の「トーンを合わせる」場合は彩度(Saturation)、明度(Lightness)の2つの値は動かさずに色相(Hue)を動かして色を決めていきます。




webnaut.jp



www.slideshare.net


hue360.herokuapp.com

ワイヤーフレームの作成

ワイヤーフレームとは「サイトの設計図」です。
サイトを作成する前に「何を・どこに・どのように」画面に配置するかを明らかにする事で、実際の作成作業をスムーズに進める事が出来ます。また複数人で作業する場合やクライアントとデザインイメージを共有する場合にも必要になってきます。
またワイヤーフレームはレイアウトの確認をする為のものなので、この時点ではデザイン情報(色やフォントの種類)は指定せずに枠のみを作っていきます。




各要素の高さ

アートボードの大きさ:1366x2700px
header:100px
nav:50px
content:600px(x4)
footer:280px
各要素の余白:10px



デザインルール

ワイヤーの段階で色を入れないのが通常です。この時点で色を入れてしまうと、ワイヤーフレーム本来の目的である「基本的な構造の確認」に余計な情報が入り、却って解り難くなってしまう恐れがあります。


cacoo.com




www.wirify.com




www.webcreatorbox.com



markehack.jp


www.justinmind.com


goworkship.com


blog.webcamper.jp



Photoshopでのアートボード

アートボード機能は、Illustratorでは以前からあった機能ですが、PhotoshopではPhotoshop CC2015から実装されました。webデザインなど複数のページのデザインを作成しなくてはいけない時に、ページ間を簡単に移動できるので大変便利です。



helpx.adobe.com



参考資料


stock.adobe.com


デザインカンプ


Figmaワイヤーフレーム

youtu.be



makikosakamoto.design


coliss.com

<nav id="g-nav">
<ul>
<li><a href="brands/">Brands</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Stores</a></li>
<li><a href="#">Catalogs</a></li>
<li><a href="#">Styling tips</a></li>
<li><a href="#">Partners & Press</a></li>
</ul>
</nav>

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

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


動的プログラムの導入

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

検証

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



baigie.me


developer.apple.com

webサイトの代表的なレイアウト





レイアウトを考える時に常に独創的でユニークなレイアウトである必要はありません。それどころか訪問者の多いサイトを見れば、多くのサイトで似たようなレイアウトが採用されています。それは偶然でも手抜きでもありません。そこには次のような利点があるのです。

  • 使いやすさ

よく使われているレイアウトがよく使われるようになったのは、ユーザーに有用であることが確認されたからです

  • 親しみやすさ

既視感は良いユーザー体験の助けになます。訪問者は見慣れた位置に期待する機能があることで安心感を覚えます。そして、固有のデザインに気をとられる代わりに、コンテンツの理解に時間を使えます

  • つくりやすさ

既存のレイアウトの再利用は時間を節約します。デザイナーはレイアウトの試行錯誤に費やす労力を削減でき、ユーザー体験に直接影響する視覚的な階層などデザインの他の側面に集中できます



www.weblab.co.jp



代表的なレイアウト

シングルカラム

www.balmuda.com

メリット

1カラムはサイドバーを配置しないため、コンテンツに集中してもらいやすいという点が大きなメリットです。サイドバーのメニューや広告に気を取られないため、コンテンツをじっくり読んでもらいたいサイトに向いています。


2カラム

www.nippon-dept.jp

メリット

2カラムは1カラムと違ってサイドバーを配置できるため、他の記事も見てもらいやすいというメリットがあります。Z字に視線が動くときにサイドバーが目に入るので、他のコンテンツに気づいてもらいやすいためです。


固定サイドバー


www.joshibi.ac.jp



dokodemo.app


www.lumine.co.jp


www.nodai.ac.jp


renew-sendai.jp


メリット

たとえば、問い合わせの件数を増やしたい場合、ページ下部に配置するよりも固定サイドバーに配置した方が目につきやすくなります。コーポレートサイトのようにブランド名や会社名の認知度を上げたい時など、見てもらいたいコンテンツが決まっているサイトに向いています。



グリッド(カード型)

andthefriet.com

メリット

1ページに多くのコンテンツを見せることが出来るのがこのデザインです。「Pinterest」のような画像がメインのサイトと相性が良く、ビジュアルでアピールしやすい点がメリットです。

ノングリッド(ブロークングリッド)

https://the-ringo.jp/the-ringo.jp

メリット

「重ねる・ずらす」を使って、綺麗に整えられたグリッドレイアウトをあえて崩すことによって、オリジナリティを演出するデザインの手法です。






ヒーローヘッダー

taotajima.jp

メリット

写真や動画などを画面一面を使って表示させる事でユーザーに強烈な印象を残すことができます。



creator.levtech.jp



使用するテキスト

Net Smart
よりスマートなインターネットライフを。

Concept
すべてのインターネットユーザーに快適でよりスマートさを。
ネットスマートはデジタルのチカラを持って、皆様とそんな未来を創造していきます。


Service
低価格&高機能なCMS導入。
充実の管理画面でサイト運用を効率的に。


©️2023 Net Smart