webサイト制作の勉強|2018月2月クラスブログ

webサイト制作の勉強に関する解説ブログです。

Illustratorでロゴを作る

Illustratorのアートブラシとアピアランス機能を使ってブラシで描いたイメージのクールなロゴを制作してみましょう。Illustratorのブラシライブラリーにはアーティスティックなものから幾何学模様まで、さまざまな種類のブラシが用意されています。これらをうまく利用することで、簡単で見栄えの良いロゴを作ることができます。



オブジェクトを変形させる

ステップ1
まずテキストを入力します。ブラシをイメージしたロゴにするため「丸ゴシック系」のフォントを利用し、大き目のサイズに設定します。フォントの指定やサイズの設定は、コントロールパネルから行なうと便利です。



ステップ2
テキストを入力後、書式メニューから「アウトラインを作成」を実行し、テキストオブジェクトからパスオブジェクトへ変換します。アウトラインを作成した直後はオブジェクトがグループにまとまった状態になっているので、「オブジェクト>グループ解除」を実行して、それぞれのオブジェクトが個別に選択できるようにしておきます。

f:id:yachin29:20150509003756j:plain

ステップ3
バウンディングボックスを表示させ、バウンディングボックスの四隅にあるポインタにマウスカーソルを近づけるとカーソルの形状が変わり、オブジェクトの変形が可能であることを示します。このバウンディングボックスを利用して、それぞれのオブジェクトを変形させ、全体のバランスを整えます。

f:id:yachin29:20150509003846j:plain

オブジェクトにアートブラシを設定する

ステップ1
まずは、オブジェクトに設定するアートブラシを用意します。ウィンドウメニューから「ブラシライブラリ>アート>ペイントブラシ」を実行すると、さまざまな種類のアートブラシが用意されています。

f:id:yachin29:20150509003923j:plain

ステップ2
つぎにオブジェクトの「塗り」と「線」に対してカラーの設定を行ないます。オブジェクトを選択した状態でアピアランスパレットを開くと、「塗り」と「線」のふたつの項目が存在しています。ここで「塗り」の項目を選択し、カラーパレットで「C100%/M20%」のカラーを設定します。

f:id:yachin29:20150509004016j:plain

ステップ3
続いて、「線」の項目を選択した状態で、コントロールパネルから「ドライブラシ9」を選びます。すると線にアートブラシが適用されるので、線幅を「0.85pt」に設定し、カラーを「C100%/M30%」設定して一つ目の線の設定は完了です。



アピアランスの項目を追加し、ブラシを重ねる

ステップ1
まず、「新規線の追加」ボタンをクリックし、線の項目の上に追加します。新しく作られた線の項目を選択した状態でコントロールパネルから「ブラシ(ドライブラシ9)」を選択します。続いて「カラー(C80%)」と「線幅(0.5pt)」を設定します。


ステップ2
同様の手順で、線2から線4までを作成します。ひとつのオブジェクトに4つの線が重なっていることになります。ここまでの作業で、ひとまず水彩画風ロゴの設定が完了しました。

f:id:yachin29:20150509004114j:plain

f:id:yachin29:20150509004145j:plain

他のオブジェクトへグラフィックスタイルを適用する

ステップ1
グラフィックスタイルパレットを開き、アピアランスが設定されているオブジェクトを選択した状態で、「新規グラフィックスタイル」アイコンをクリックします。グラフィックスタイルパレットにアイコンが追加されました。これで登録は完了です。 他のオブジェクトをすべて選択し、さきほど登録したグラフィックスタイルのアイコンをクリックします。すると、すべてのオブジェクトに対して同じアピアランスの内容が設定されます。

f:id:yachin29:20150509004230j:plain

ステップ2
ペンツールを使い、短めのパスを描きます。「塗り」を透明に設定し、「線」に「C100%/M20%」のカラーを設定しておきます。ブラシライブラリの中から「アート>アート_インク」を開きます。さきほど描いたパスを選択し、散布ブラシの中から「飛沫」を選択します。すると、インクがハネたようなパスを描くことができます。



カラーバリエーションを作成する

ステップ1
色を変更したいオブジェクトを選択し、コントロールパネルから「オブジェクトを再配色」アイコンをクリックします。するとダイアログが表示されるので、その中から「編集」ボタンをクリックします。

f:id:yachin29:20150509004322j:plain

ステップ2
ハーモニーカラーを維持するためのリンクをチェックし、カラーホイールの中にあるスライダーをドラッグします。すると、オブジェクトに設定されたカラーの深度を維持した状態でカラーを変化させることができます。それぞれのオブジェクトのカラーを変更し、今回のブラシ風ロゴの完成です。


f:id:yachin29:20150509004359j:plain

f:id:yachin29:20150509004449j:plain

Javascript 演習問題

Javascript演習問題

  1. サムネイル画像にマウスを乗せたとき、メイン画像が変化するように記述しなさい。(画像、記述方法は自由)
  2. 今日の西暦年月日曜日(〜年〜月〜日〜曜日)を表示させなさい。
  3. 入力された値が5の倍数かどうかを判別する記述をボタンを押したときに表示させなさい。
  4. おみくじをDOMのdocumentオブジェクトを使って作りなさい。
  5. 以下の表組みをfor文を使って作りなさい。

※1ドル=107円換算

f:id:yachin29:20180420112435p:plain

広告を非表示にする

クライアントへのヒアリング

いよいよサイト制作が始まります。
サイト制作のワークフローでまず最初にするべき事はクライアントへのヒアリングです。
ヒアリングで1番大事なのはしっかりと意思の疎通が出来ているか、につきます。こちらの状況や目的をしっかりとクライアントに伝え、それを踏まえてクライアントの要望もしっかりと聞く。
また、今の段階で出来る事、出来ない事もしっかりと伝える事も重要です。ヒアリングがスムーズに進めばその後の制作もスムーズに進むし、ヒアリングの段階で曖昧なまま制作を進めてしまうと、色々と躓くことが多くなってしまうので、ヒアリングに望む際にはしっかりと準備をしておきましょう。


ヒアリングの際に明確にしておきたいポイント

  • 新規のサイトか既にあるサイトのリニューアルか
  • Webサーバーの環境(自前・レンタル・有料・無料)
  • ドメイン名(有料・無料)
  • サイトの目的
  • コンテンツの中身
  • コンテンツ素材の有無
  • SNSとの連動
  • アップロード後の保守・管理
  • 参考になるサイトの有無
  • 公開希望予定日

などを出来る限り、細かくヒアリングしましょう。
必要であれば事前にヒアリング・シートなどを用意していきましょう。
ただ、ヒアリングシートに書いてある内容をうめただけでサイトを作る事は難しいので、しっかりとクライアントと話をしてなるべく多くの情報を聞くように心がけましょう。

ferret-plus.com


今回のクライアントワークはあくまでの授業の一環なので、現時点で出来る事と出来ない事をしっかりと把握し、クライアントに伝えましょう。

現時点で出来る事


現時点で出来ない事

  • データベースと連動したお問い合わせフォーム
  • ECサイトの構築
  • Wordpressを使ったサイト制作


liginc.co.jp



itjobgate.jisa.or.jp



kakomon-quiz.com



blog.sixapart.jp



webyougo.wiki.fc2.com

Webサイトの構成表の作成

Webサイトの構成を明確にする為に必ず、Webサイト構成表を作成しましょう。
「サイト全体で何ページになるか?」「どのページにどんな内容のコンテツを入れるか?」「どういう順番でコンテンツを並べたら、ユーザーが見やすい・解りやすいか?」
などは、必ずデザイン部分に入る前に決めてしまいましょう。もちろん作る過程で多少変更はありますが、基本的には入れるべきコンテンツの種類・内容・順番が決まった段階で、ワイヤー・カンプに入ります。
この構成表はサイトマップとは違い、自分自身のサイト制作作業をスムーズに進める為に用意する物です。

サイトマップとは?

サイトマップとは、サイト全体のページ構成や、「どの様なコンテンツが入るか?」などを示すためのもので、サイト制作を進める上で無くてはならない物です。
サイトマップは大きく分けると、ユーザー用と検索エンジン用の2種類があります。


構成表作成の手順

掲載させるコンテンツのグループ分け
いきなり、構成表を作るのでは無く、まずはそのWebサイトに必要なページを全て書き出してみましょう。この時は階層、カテゴリーなど関係なくとにかく思いつくままに。それが終わったらその中でグループ分けをします。


コンテンツの重要度をランク付け
コンテンツのグルーピングが終わったら、次はどの様な順番でページに載せていくかです。気をつけなければいけないのは、作る側やクライアントが「これは重要だ!」と思っているページでも、ユーザーにとって価値のあるコンテンツ・情報か、どうかをしっかりと見極めて、順番を決めましょう。また、コンテンツの順番はSEOとも関わってくるので、上位検索を考えている人はここで、必ず、「検索キーワード」を選定し、キーワードの内容も加味したランク付けを行いましょう。


ユーザーの利便性を考える
Webサイトの階層が深ければ深いほど、ユーザーは多くのリンクをクリックしなければなりません。要点をしぼってなるべく浅い階層(2〜3階層)を目指しましょう。また、ユーザーがどういう順番で情報を取得すると、ユーザーにとって便利なサイトになるか、などユーザー目線での導線作りを心がけましょう。





課題

自身で1つサイトを探して、自分なりに「サイトの構成表」を作ってみましょう。そしてクライアントワークのサイトの構成表も必ず作成しましょう。


f:id:yachin29:20171007194726p:plain

the-ringo.jp

上記のサイトの場合の例

コンテンツ構成表

ページ構成:5ページ

  1. Home:トップページ
  2. About
  3. Menu
  4. Party
  5. Contact
  6. Reservations(外部サイトへのリンク)
Homeページのコンテンツ内容
  1. ロゴ(共通)
  2. グローバルナビ(共通)
  3. キービジュアル
  4. aboutの概要(aboutページへのリンクボタン)
  5. menuの概要(menuページのイメージ画像、Menuページへのリンクボタン)
  6. お店情報(お店情報のイメージ画像、Contactへのリンクボタン)
  7. 外部サイトへのリンク(食べログぐるなび・外部web予約システムサイト)
  8. 次ページ(aboutページ)へのリンク
  9. フッター(コピーライト、SNSリンク)
aboutページのコンテンツ内容
  1. ロゴ(共通)
  2. グローバルナビ(共通)
  3. キービジュアル
  4. ページ内リンクボタン
  5. お店のコンセプト(店内などのイメージ画像)
  6. シェフの紹介(シェフの画像)
  7. SNSへのリンク
  8. 予約への誘導
  9. 外部サイトへのリンク(食べログぐるなび・外部web予約システムサイト)
  10. 次ページ(Menuページ)へのリンク
  11. フッター(コピーライト、SNSリンク)
Menuページのコンテンツ内容
  1. ロゴ(共通)
  2. グローバルナビ(共通)
  3. キービジュアル
  4. ページ内リンクボタン
  5. シェフのご挨拶
  6. 料理5品の紹介・料理の画像付き
  7. シェフが料理しているイメージ画像
  8. 予約への誘導
  9. 外部サイトへのリンク(食べログぐるなび・外部web予約システムサイト)
  10. 次ページ(Partyページ)へのリンク
  11. フッター(コピーライト、SNSリンク)
Partyページのコンテンツ内容
  1. ロゴ(共通)
  2. グローバルナビ(共通)
  3. キービジュアル
  4. ページ内リンク
  5. 貸切パーティーについて
  6. プランの内容例を4例(人数、予算、要望に応じて変更可、という事を明記)
  7. 貸切パーティーの場合の細かい情報
  8. パーティーのイメージ画像
  9. 予約への誘導
  10. 外部サイトへのリンク(食べログぐるなび・外部web予約システムサイト)
  11. 次ページ(Contactページ)へのリンク
  12. フッター(コピーライト、SNSリンク)
Contactページのコンテンツ内容
  1. ロゴ(共通)
  2. グローバルナビ(共通)
  3. キービジュアル
  4. ページ内リンク
  5. アクセス(住所、最寄駅からの情報、マップ)
  6. 営業時間
  7. 予約への誘導
  8. 外部サイトへのリンク(食べログぐるなび・外部web予約システムサイト)
  9. 次ページ(Homeページ)へのリンク
  10. フッター(コピーライト、SNSリンク)

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

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

f:id:yachin29:20160427010604j:plain


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

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

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

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