読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

形を捉えるには

デザイン

ゲシュタルトの法則

人間は近いものや似ているものをグループ化したり、閉じた図形を見出そうとする性向がある、という法則。

  • 「要素が組み合わさることで全体が体制化される」という法則。
  • 視知覚(目から得られる情報をもとに状態を把握するはたらき)に関する法則の一つ。
  • ゲシュタルト心理学の理論である。
  • 心理学用語で「ゲシュタルト」は「部分の寄せ集めではなく、それらの総和以上の体制化された全体構造を指す概念」のこと。
  • ドイツ語で「形」や「形態」、「構造」の意味。
デザインとゲシュタルトの法則
  • 同じ意味や役割を持つ要素をまとめる
  • 全体をぼかしても塊が判断できる程度のグループ化が望ましい
  • 関連性のない要素につながりを作らせない
  • 意図せず生まれるつながりを予測し、混乱させないデザインにする
  • 「地」を上手く利用する(「地」と「図」の関係)
  • 余白の効果を理解し、意図した要素に注目させる


ゲシュタルト崩壊

図形や文字などの全体像が把握できず、構成する部分を個別にしか認知できなくなった状態のこと。


ゲシュタルトの7法則

  1. 近接(Ploximity)
  2. 類同(Similarity)
  3. 連続(Continuity)
  4. 閉合(Closure)
  5. 共通運命(Common Fate
  6. 面積(Area)
  7. 対称性(Symmetry)

近接
距離が近いとグループと考える。

  • それぞれの要素数が異なってもグループと認識する。



類同
色や形、向きが同じだとグループと考える。

  • 近接同様、それぞれの要素数が異なってもグループと認識する。



連続
切れ目や変化の無い線を見出す。

  • 下図では「4本の線の集まり」や「2つの『くの字』の集まり」ではなく「2本の直線の交差」と認識する。



閉合
意図して描かれていない単純で閉じた図形を見出す。

  • 下図では「欠けた円とラグビーボール様の形の集まり」ではなく「重なった3つの円」と認識する。


  


共通運命(Common Fate
移動のベクトルや変化の周期が同じだとグループと考える。

  • 近接や類同よりもグループ化の効果が強く働く。



面積(Area)
重なっている図形では面積の小さいほうが主として認識されやすい。

  • 面積の大きい方は「地(背景、ベース)」として認識される。



対称性(Symmetry)
対称な図形ほど認識されやすい。

  • 対称的な輪郭があると意図せず図形を見出すことがある。


角版写真と切り抜き写真

  • 役割の違いを理解する
  1. 角版
  2. 切り抜き
  3. ぼけ足


IllustratorPhotoshopで作るWeb画像

図(figure)と地(ground)

  • 実在するものを描くとき、実際に形あるものや空間を、平面にどのように描いたらよいかという問題にぶつかります
  • いすの例は、いすの形態を黒い形で表わし、まわりの空間をグレーの形で表わしたものです
  • 黒いいすの部分がポジティヴな形、まわりのグレーの部分がネガティブな形です


ネガティヴな空間を考えることは、いろいろな点で役立ちます。

  • 第1にネガティヴな部分の大きさと形を観察することによって、対象をより正確に描くことができます
  • 第2にこの空間を意識することで、左下の二つの頭部の絵に見られるように構図上の問題を解決することができます。


このように、ネガティヴな形はデザイン全体の構図にとっても重要なのです。


形は視点によって変化する

シルエットといえば横から見た平面的な形をます考えますが、これは横から見た顔や身体が最も説明的だからでしょう。
しかし、完全な球を除くあらゆる形態は、視点が変われば形も変わって見えます。
ですから、こう見えるはすだという先入観を捨てて、形をよく観察しなければなりません。


視点を変えると物がどのように変わって見えるか描いてみましょう。

  • 視点を変えるだけでなく、想像力によっても、物の形は変わります


周囲を見回して、いろいろな形を自分で見てください。
形は自分の意図と必要に応じて変えられるのだ、と考える方が便利なことがわかってきます。




プログラミング教育のMOZER | Webデザイン学習コース体験版

自宅学習

自宅学習

  • 授業と平行して自宅でも復習してもらいます
  • 新しい知識を学ぶと同時にWebを利用していく楽しさも体感してもらいます

デイジーと秘密のメッセージ

mozer.io


f:id:web-0818:20161018014633j:plain

f:id:web-0818:20161018015314j:plain

f:id:web-0818:20161018031333j:plain


予約システム

WordPress

時間単位で予約できる予約ページを作成


http://mtssb.mt-systems.jp/


http://mtssb.mt-systems.jp/downloadp/

予約システムの設定

各種設定

  • 詳細設定をしておく
予約パラメータ

カレンダーを表示する


受付を作成直後からにする



予約受付期間

  • 当日から何ヶ月先までの予約を受け付けるかを設定します
  • 最大6ヶ月までの設定が可能です


空きマーク

  • 空きが充分にあるとき予約カレンダーに表示する文字を入力します
  • 初期設定は「○」です
  • 何も入力せずに保存すると予約残数を表示します


残数少マーク

  • 空きが少なくなったとき予約カレンダーに表示する文字を入力します
  • 初期設定は「△」です
  • 何も入力せずに保存すると予約残数を表示します


空きなしマーク

  • 空きがないとき予約カレンダーに表示する文字を入力します
  • 初期設定は「×」です


不可マーク

  • 予約不可のときに表示する文字を入力します
  • 初期設定は「−」です


空き率

  • 空きマーク「○」から残数少マーク「△」切り替えのタイミング設定を、「空き率」に%数値を入力して決めることが可能です
  • 残数がここで設定した率より少なくなると、残数少マークに切り替わります


予約カウント

  • 「大人」「小人」「幼児」「車」の4項目に対し、チェックされた項目が予約データの入力対象となります


メッセージ

  • 「入退場予定入力」の項目にチェックを入れると、予約時に入場時間と退場時間の入力欄が表示されて入力できるようになります
  • ここで入力した入退場時間は、予約通知メールの中のメッセージ項目に追加記載されます
  • 時間ごとの参加人数管理などが便利になります


変更を保存

  • クリックすると入力したデータが保存されます
施設(店舗)

予約のメール


予約品目とスケジュールを登録

予約品目


スケジュール


予約カレンダーを作成

  • 予約の入力や予約状況を表示させるには、予約カレンダーを動作させるための決められた固定ページが3種類必要です

種類 内容 パーマリンク
予約カレンダー 動作用の固定ページ ページのタイトルは「ご予約」などと入力しておく booking-form
予約の2重登録防止用の固定ページ ページのタイトルは「ありがとうございました」などの謝辞を入力しておく booking-thanks
予約カレンダー表示用の固定ページ ページのタイトルに「予約を受け付けるサービスの名前」を入力しておく。なお、編集ページのテキストボックス内に「monthly_calendar id="xx"」のコードを添付しておく必要がある。 なし(仮にcalendarにしておく)

ご予約ページ作成
  • 新規固定ページ追加
  • パーマリンク名を「 booking-form」に変更して公開します


予約品目
  • 「予約品目の一覧」から編集したいページの「編集」リンクにマウスをあわせます
  • ページ下に表示される「post=xx」 の数字の「xx」をメモしておきます


[monthly_calendar id="xx"]


この記述を、「予約カレンダー表示用の固定ページ」の本文に記述します。
公開後、プレビューで「ご予約」ページを確認します。


  • 予約予定日をクリックし実行してみます。


  • 予約時間をクリックし実行してみます。
  • 予約情報を入力します。









超簡単デプロイ

WordPress

WordPressのデプロイ

  • ロカールのデータをリモートに移して正しく表示させる
ローカルからのバックアップ
  • 「ツール」→「全てをエクスポート」(例:wordpress.xml
  • 「wp-content」→「uploads」フォルダー
  • 「wp-content」→「themes」→「mytheme」

リモートサーバーにWordPressをインストール

  • インストール後に、各フォルダー(uploads、mytheme)をアップロード
  • wordpress.xmlをインポート(アタッチメントのチェックをつける)
リモートサーバー上のデータベースからSQLファイルをエクスポート(wp_posts.sql
  • phpMyAdminからデータベース内にあるテーブル名「wp_posts」のみをエクスポート
画像のローカルのURLをリモートのURLに変更
リモートサーバー上のデータベースに上書き
  • リモートサーバー上のデータベース内のテーブル名「wp_posts」を削除します
  • phpMyAdminのインポートから、変更を加えた「wp_posts.sql」を読み込みます


以上で、完了です。
リモート上のphpMyAdminから「wp_option」を表示させ、「siteurl」と「home」の値が新しいURLになっていることを確認しましょう。
今回は、テーマを自作し内容がシンプルだったため、この方法で問題なくデプロイできます。
プラグインは、設定し直しましょう。
「メディア」は、画像が登録されていないので、サムネールなどで使用する場合は、読み込み直してください。


あえて難しい方法でデプロイする場合は、他のブログをみてください。

WordPressのデータを別サーバーに移行する

演習問題

PHP

問題

  • 以下の問いに答える記述をしなさい
問01
  • 現在の年月日・時刻をPHPで記述し、ブラウザに表示させなさい
問02
  • 数字「1」から「10」までの数字を、ブラウザにランダムに表示させなさい
問03
  • 「こんにちは」の文字列の長さを、ブラウザに表示させなさい
問04
  • 九九の表をPHPで繰り返し文で記述し、ブラウザに表示させなさい
問05
  • 「input.php」に「名前」と「年齢」を記入し、その値を「GET」で取得して「output.php」に表示させなさい
問06
  • 問05の解答に占いを追加し、「POST」で表示させない
  • 「例:フェリカさん20歳の今日の運勢は、大吉です。」
  • 「大吉・中吉・小吉・吉」をランダムに表示させなさい
問07
  • 「input.php」のテキストフィールドにフルーツの英語名を入力すると、「例:Appleは日本語では、りんごと呼びます。」というふうにブラウザに表示させない。
  • 登録されていない単語には、「登録されていません。もういちどやり直してください。」とブラウザに表示させなさい
問08
  • お問い合わせフォームを以下のように作りなさい。「index.php
  • フィールド幅は、50文字が入るように指定しなさい

    

問09
  • 「index.php」に入力された値を「check.php」で表示し、入力漏れがあったとき「index.php」に戻す設定をし、すでに入力されているデータは、そのまま表示されるように記述しなさい
問10
  • データベース名「contactus」を作成し、「submit.php」に「check.php」から送信されたデータが表示され、同時にデータベースにデータが書き込まれるよう設計しなさい
  • データベースの設計は、プリントスクリーンで提出フォルダー内に添付すること。テーブル名は、任意

レイアウトの基本構造を作る

WP-Design

ヘッダーとフッターのボックスを作成する


《header.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>
<?php wp_title( '|', true, 'right'); ?>
<?php bloginfo( 'name' ); ?>
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

<header>
HEADER
</header>


《footer.php

<footer>
FOOTER
</footer>

<?php wp_footer(); ?>
</body>
</html>