就労移行支援事業所で学んでいることと摂食障害の克服。そして発達障害グレーゾーン。

36歳から始めたデザインの勉強と摂食障害をどう克服していくかをつづっていきます。

http://code.jquery.com/jquery-1.7.1.min.js

就労移行支援事業所で学習中のWebデザイン スマホサイト完成!(一旦ね)

今、就労移行支援事業所で学習中のWebデザインの勉強は、動画学習をしているのですが、その修了課題というのが、架空のカフェのスマホサイトを作るというものでした。

 

自分の中では6月中に、6月30日までに終わらせるという目標にしていたので、絶対に終わらせたかったです。

 

HTML、CSSjQuery、グラフィックソフトの使い方、ワイヤーフレーム、デザインカンプ、Webアクセシビリティについての学習をしていきました。

 

Schooさんが行っている動画学習です。

 

Webサイト制作の学習内容

①HTML入門(5コマ)

 ・文書構造を形作る

 ・入れ子で使うタグを使う

 ・属性と要素

 ・アンカーリンクの指定法

 ・headタグに記載するもの

 

CSS入門(6コマ)

 ・CSSとは何か?

 ・文字デザインの全て

 ・アンカータグデザインの全て

 ・ナビゲーションデザインの全て

 ・ナブバー(横並びのメニュー)の全て

 ・サイトの段組

 

スマホコーディング入門(6コマ)

 ・構造設計とHTMLコーディング

 ・スマートフォンUIの特徴とCSSコーディング

 ・ファーストビューのUIを作る

 ・メインコンテンツのUIを作る

 ・ユーザーが操作するUIを作る 戻るボタンなど

 ・ユーザーが操作するUIを作る メニューなど

 

jQuery入門(6コマ)

 ・スマホサイトのためのjQuery

 ・スムーズに上に戻るボタンの実装

 ・ドロワーメニューの実装

 ・アコーディオンの実装

 ・モーダルウィンドウの実装

 ・フォーム入力チェックの実装

⑤Webサイトの公開 さくらインターネットレンタルサーバー(2コマ)

 ・レンタルサーバーの利用とWebサイトの公開

 ・ドメインの設定とWordPressの設置

Illustrator&Photoshop入門(6コマ)

 ・Illustrator ピクトグラム

 ・Illustrator バナー

 ・Illustrator ヘッダー、ボタン

 ・Photoshop 基本操作

 ・Photoshop 色調補正

 ・Photoshop 画像合成

ワイヤーフレーム・デザインカンプ入門(4コマ)

 ・概要と役割

 ・ワイヤーフレームの作り方

 ・デザインカンプの作り方

 ・制作実演

アクセシビリティ入門(7コマ)

 ・なぜWebはアクセシブルなのか

 ・戦略と要件定義

 ・ナビゲーション設計

 ・インタラクション設計

 ・コンテンツ設計

 ・ビジュアルデザイン

 ・実装

 

以上を学習してきました。

 

修了課題の内容

・デザイン概要

 ターゲット:渋谷道玄坂で働くオシャレ好きな20~50代男女

・サイトイメージ

 オシャレで都会的なイメージ

・キーワード

 都会、モダン、ウッディ、オシャレ

・画像は支給された画像を自由に使用。写真以外のイラスト、装飾等に制限はなし。

サイトマップ

 TOP、About、Access、Menu、Contactの要素を含むサイトで、シングルページでも良い

・店舗名『Shibu Cafe』

 

これをスマホ用のサイトで作りました。

 

写真が用意されていたのと、お店の紹介文やメニューの名前、値段も用意されていました。

 

さあ、作ってみよう!・・・・難しい。。

いざ、作ってみると難しかったです。。

勉強したはずなのに、コーディングの手が進まなかったです。

 

もう一度、動画を見直しながら、動画に出てくる先生と同じようにコーディングしても、思うように実装できなかったり、出るはずの文字が出なかったり、本当に嫌になってしまいました。

 

いろいろなカフェがあり、オシャレなカフェもたくさんあります。

 

私は無印良品のカフェサイト「Cafe&Meal MUJI」のサイトのようなものを作りたく、それっぽいものを目指して作りました。

 

いろいろやったらぐちゃぐちゃになってしまい、最初からやり直したり、お手本をそのままコピーした部分もありました。

 

私、、向いていないんじゃないかと何度も思いました。

 

しかし、うまいこと文字の色が変わったり、上に戻るボタンがきちんと出た時とかはとても嬉しく、「楽しい」とか「やった!!」とか思っていました。

 

文字のサイズが変わったり、色が変わったりしても何とも思わず、ただただつまらなかったら、きっと途中でやめていたかもしれません。

 

そして、ついに何とか完成する

6月30日、ギリギリに何とか完成させ、レンタルサーバーも申し込み、データも載せることができ、自分のスマホでも見られるようになりました。

 

目標にしていた日に間に合うことは間に合いましたが、まだまだ不十分な点はあります。

 

無理矢理作って終わり!、ということもあまりしたくなかったので、作っていきながら、これは本当に無理だと思ったら6月の完成は諦めようと思いました。

 

しかし、一旦でも完成させ、その後にもっと良いものを作れるようになっていければと思い、一旦完成させることができそうなら、それを目指そうと思いました。

 

今は正直、HTMLもCSSも不十分な理解のままです。

 

6月28日に就労移行支援事業所での面談があり、「時間はかかると思うけど、きちんと、HTMLやCSSの基礎を勉強したい」と、Webデザインの先生にお話ししました。

 

「そう思うのであれば、勉強していっても大丈夫だよ」、と言ってもらい、これからはもう一度、改めてコーディングの勉強をしていこうと思います。

 

水曜日にまた先生に、今後について相談しようと思っています。

 

作ったサイトのスクリーンショットを何枚か載せてみます。

 

↓↓ トップ画面 ↓↓

f:id:yakiii:20170701190046p:plain

 

↓↓ メニューアイコン(三本線のやつ)をタップした時に開いたところ ↓↓

f:id:yakiii:20170701190106p:plain

 

↓↓ メニューの画面 ↓↓

f:id:yakiii:20170701191118p:plain

 

こんな感じのものです。

 

あ、ロゴですが、これは自分で作りました!

 

制作期間、約1ヵ月でした。これは遅いペースなのかもしれませんが、一旦でも完成したということが私にとっては嬉しいことでした。

 

 

ここまで読んでくださった方がいらっしゃいましたらありがとうございました!