-
自己紹介
ニックネーム
Pinky
経歴
アパレルブランドの販売員として接客業を経験、主なブランド,MEN'S BIGI,COMME CA ISM 等
2015年2月20日より池袋フェリカテクニカルアカデミーにてWEBサイト制作を学びました。
趣味
美術館めぐり、旅、パズドラ、イラスト
自分を一言で表すなら
アクティブなインドア系オタク！
趣味のイラストサイト→
-
サイトのコンセプト
WEB制作未経験者によるWEBサイト制作の記録。
池袋フェリカテクニカルアカデミーにて2015年2月20日からスタートし、約半年間の間に制作した作品をこちらにアップしています。
基本的なHTMLやCSSから始まり、JAVASCRIPTなどの応用を学び実際にクライアントワークを得てWEBサイト制作の一連を学ぶ事ができました。
更に現在では欠かせないレシポンシブルデザインやCSS3なども学び、今後のWEBサイト制作に活かしていきたいと思っております。
フェリカテクニカルアカデミーWEB制作科→
-
WEBサイト制作練習作品
授業の中で制作した練習作品をご紹介致します
その際に利用した技術やソフトはもちろんですが作品ごとのポイントを解説させて頂きます。
それぞれファイルリンクがありソース確認ができるようになっております。
-
石垣島観光ガイド
１カラムのレイアウト
制作期間 2日
使用したツール Ai,Dw
ポイント
基本的な文書構造をマークアップした後、div要素でグループ化をしてレイアウト用ブロックを作成しレイアウトを組み上げました。
レイアウトに合わせた画像をAIで編集作成しCSSを使い文字色や背景色と囲みをデザインしました。
-
ガラスの靴
１カラムレイアウト応用
制作期間 2日
使用したツール Dw
ポイント
見出しと本文の関係を考えてのマークアップを基本とし、適正な文字色・文字サイズをCSSで指定しています。
画像サイズなども考慮したmarginとpaddingの指定に慣れるのに苦労しました。
-
２カラムレイアウト構造
floatを使ったレイアウト
制作期間 1日
使用したツール Dw
ポイント
通常ならHTMLの順序通り縦に並んでしまうコンテンツを横に並べることが可能になるfloatを使いレイアウトを組みました。
floatした子要素を持つ親要素は、高さがなくなるのが基本で、浮き上がらせて、左右に移動させるイメージをつかみ、ナビゲーションにフォバーアクションをいれてより実際のサイトページに近い形になってきました。
-
卵料理カフェ Cockeyolly
２カラムレイアウト
制作期間 2日
使用したツール Dw
ポイント
floatを使用することで実際のWEBサイトに近くなり、レイアウトも複雑になってきました。
floatした子要素を持つ親要素は、高さがなくなるのが基本なので、浮き上がらせて、左右に移動させるイメージをつかみました。
-
建築散歩
２カラムレイアウト応用
制作期間 1日
使用したツール Dw
ポイント
背景画像の位置指定を理解していないと見栄えが悪くなってしまいます。
縦ナビゲーションを入れた卵料理カフェサイトと同じ２カラムレイアウトですがfooterにも背景画像指定するところが新しい要素でした。
-
Homepage Title
２カラムレイアウト応用その２
制作期間 1日
使用したツール Dw
ポイント
後に制作する企業系サイトレイアウトの基盤になった作品です。
大きなトップ画像があり、その中にタイトルを配置してコンテンツとナビゲーションの２カラムで構成されたスタンダードなレイアウトになっています。
-
Café de la plante
２カラムレイアウト応用その３
制作期間 1日
使用したツール Ai,Dw
ポイント
２カラムのレイアウトにプラス横ナビゲーションを加えたレイアウトです。
画像配置に加えて、画像を活かす為の色の指定など細かいCSSの設定に苦労しました。
-
provence
２カラムレイアウト応用その４
制作期間 1日
使用したツール Dw
ポイント
以前までの作品と違う点は、ナビゲーションに画像を加えてよりサイト全体のデザインに一体感を出しているところです。
少しのアレンジを加えるだけで雰囲気がガラッと変わるということを実感し、実際のサイトのほとんどにこの手法が使われていることに気が付いた作品でもあります。
-
企業系サイト
トップページ構築
制作期間 ６日
使用したツール Ai,Dw
ポイント
いくつかの定義の基に、配色や画像を自分でデザインした作品です。
CSS Spriteを使用した隠し文字を利用したナビゲーションを導入しています。
文字の大きさなどはもちろんのことmarginとpaddingのの細かい微調整をしたことで間隔の数値を感覚的に解るようになりました。
HTMLとCSSの検証ツールによるエラーチェックも欠かさずしています。
-
薬玉文様（くすだまもんよう）
positionを使ったレイアウト
制作期間 1日
使用したツール Dw
ポイント
positionプロパティは、ボックスの配置方法（基準位置）が、相対位置か絶対位置かを指定することが基本である事を学びました。
今回の課題ではposition:absolute;を使用してブラウザの中央に表示をしています。
-
Patisserie camellia
positionを使ったレイアウト応用
制作期間 3日
使用したツール Dw
ポイント
floatするコンテンツを囲む親要素に指定する「overflow:hidden;」のように、親要素が自動的に伸縮することができないので注意しなければならない。
うまく設計しないと枠からはみ出して他のコンテンツに重なって表示され、情報の読み取りに支障がでるのでレイアウト設計に時間がかかりました。
-
kitchen
アコーディオンメニューを埋め込む
制作期間 3日
使用したツール Dw
ポイント
jQueryによるアコーディオンメニューを作りました。
どこをクリックすると動きがでるのか、どこを閉じるかなどを考えてコードを書きました。
-
Past
今までの制作応用
制作期間 6日
使用したツール Dw,Ps
ポイント
CSS3を使いbox-shadowやborder-radiusなどを使い細かいデザインにも力をいれました。
HTML5のvideoタグを使い動画をサイト内に入れ込む方法も学びました。
jQueryのプラグインを使いトップ画像に動きがでるようにしました。
-
loft
カンプ制作
制作期間 1日
使用したツール Dw,Ai
ポイント
イラストレーターを使いレイアウトサイズなどを正確に設計して、各画像に沿ってガイドを引き、スライス作業をしたものをコーディングしました。
既存のサイトを真似してコーディングしてみることがとても勉強になると知りました。
-
レシポンシブルデザイン作品
レスポンシブ・Webデザインとは？
ブラウザーのウィンドウ幅に合わせてCSSでWebページのレイアウトを変更する手法のことです。
「Media Queries（メディア・クエリー）」「Fluid Grid（フルード・グリッド）」「Fluid Image（フルード・イメージ）」という3つの方法があります。
スマートフォンやタブレットが普及している現在必要なデザイン技術の一つです。
-
楽しいおかず
レスポンシブWebデザイン
制作期間 1日
使用したツール Dw
ポイント
レスポンシブWebデザインを実装する際にメディアクエリ（Media Queries）を使用し、デバイスのウインドウサイズなどによって読み込むCSSを分岐させました。
この作品では画像のみのレイアウトになっています。
-
枝豆隊長
レスポンシブWebデザイン２
制作期間 2日
使用したツール Dw
ポイント
メディアクエリ（Media Queries）を使って画面幅に応じてCSSを切り替えました。
デバイスの画像解像度・ウィンドウの幅・向きなどの指定条件にあわせて別々のCSSを適用。
メディアクエリを使ったCSSの切り替えでは、CSSを切り替える条件である「ブレイクポイント（Break Point）」を決め、それぞれの条件に沿ったスタイルシートを記述しています。
-
Google
Google画像検索風のjQueryレスポンシブ対応
制作期間 1日
使用したツール Dw,Ps
ポイント
Google画像検索のように、サムネイルをクリックすると詳細エリアが広がり画像の情報が出てくる仕組みのjQueryを使用しました。
デフォルトでは半角スペースほどの空白（余白）が発生してしまい、扱いに困ることがありますが、コメントアウトを入れる事で改行しないようにしています。
このポートフォリオサイトにもこのjQuery使用しています。
-
WEBサイト制作作品
WEB上にアップした作品
様々な制作で学んだ技術を活かして表現すること、WEBサイトを一から創りあげる事が勉強の目標であり目的です。
実際のクライアントワークを得てオリジナルWEBサイトを作ったり、JimdoやWordPressを活用したサイトなどをつくりデザインしました。
-
エイトマイルヘアーデザイン
WEBサイト制作
制作期間 18日
使用したツール Dw,Ps,Ai
ポイント
クライアントワークを行い、調布市にある美容室の公式サイトを一から制作しました。
今までに学んだ技術を使いデザインし、サイト内のそれぞれの細かいパーツ作りに力をいれ、簡単な更新用にtwitterを埋め込みました。
SEO対策の"Keywords"設定や正しい文章構造を意識してサイトを創りあげました。
-
snacklover
モバイルサイト制作
制作期間 6日
使用したツール Dw,Ps
ポイント
内容はオススメなお菓子を紹介すという趣味サイトになりますが、モバイルファーストでサイトを制作しました。
htaccessを使用してPC用モバイル用データをそれぞれ制作して自動的に切り替わるようにしました。
-
いい旅・夢気分
WordPressでブログサイトを制作
制作期間 6日
使用したツール Dw
ポイント
WordPressの基本サイト構築からサイトの拡張やカスタマイズ方法を学びながら制作しました。
レシポンシブルデザインにも対応させてより実用的なサイトにしました。
-
Amazing Web 100
サイト100選
制作期間 50日
使用したツール Dw
ポイント
お気に入りのWEBサイトを「visual」「useful」「food」「shop」「web」「life」のカテゴリに分けてご紹介しています。
デザインやコンセプトも千差万別のWEBサイトを観ていると制作の刺激になります。
-
アイテム
Webサイト制作用アイテム
Webサイトを制作するうえで欠かせないカスタマイズアイテムの紹介です。
サイトをデザインする上でこの技術をどういう風にアレンジして取り込んでいくかがキーとなります。
-
オリジナルフォーム
制作期間 2日
使用したツール Dw
ポイント
「input type=""」などを使用しスタンダードなフォームを制作しました。
セキュリティの問題などがあるのでgoogleフォームなどを使用した方が良いという事も仕組みを学んだ後で理解できました。
-
TAB
動きのあるタブをjQueryで作る。
制作期間 1日
使用したツール Dw
ポイント
jQueryを使用し少し変わった動きのするメニュータブをを制作。
使い処は限られてきますが、jQueryを使うことによりデザインに良いスパイスを与える事もあります。
-
SALEロゴ
CSS3アニメーション１
制作期間 1日
使用したツール Dw,Ai
ポイント
CSS3アニメーションを使いロゴの背景にグラデーション効果をいれてオシャレなデザインに作りました。
文字やロゴの部分を透過させてCSS3アニメーションを活かしています。
-
NAMEロゴ
CSS3アニメーション2
制作期間 1日
使用したツール Dw,Fl,Ai
ポイント
ペンキで文字を描いたようなアニメーションをフラッシュを使って制作しました。
「script type=""」を使用してタイミングなどを設定してhtmlに組み込んでいます。
-
バナー広告
CSS3アニメーション3
制作期間 1日
使用したツール Dw,Ai
ポイント
「@keyframes」を使用して動きの制御をして速度調整などもして見やすく自然な動きにさせました。
CSSは便利ですが動きが重くなることもありブラウザ対応にも気をつける必要があります。
-
Boxslider
プラグインで画像置換する。
制作期間 1日
使用したツール Dw,Ai
ポイント
Boxsliderを導入することで、イラストや写真などを多く載せたいデザインに活かせます。
こんかいの作品では自作のイラストを載せています。
-
走る車
DOMを使用したアニメーション
制作期間 1日
使用したツール Dw,Ai
ポイント
Aiで描いた車をCSSで初期位置を設定し、フォームのボタンに「onclick」イベントハンドラを追加し、クリックで「move」関数を呼び出せるようにします。
車が5pxずつ右に動いて、800px以上進むと左端に戻り、再びクリックすると止まるように設定して走っているように見せています。
-
ムービー
映像を背景に配置する。
制作期間 1日
使用したツール Dw
ポイント
「video」タグを使用して背景に動画をながしています。
海外サイトでよく見かる、スタイリッシュなデザインにマッチします。
このポートフォリオサイトにも使用していますが動画のサイズにとても気を遣っています。
-
まとめ
フェリカで半年間学んでみて
Webに関して右も左も解らず始めた半年前に比べてみると、一つのサイトを一から作ることが出来たという経験が大きな財産になったと思います。
学んだ技術
HTML,CSS,javascript,php etc
制作に使用したソフト
Dw,Ai,Ps,Fl,wordpress etc
これからの目標
様々な技術を学びましたが、まだ基本中の基礎を知った程度に過ぎないので、これからがスタートという気持ちでWeb業界に進んで行きたいです。
改めてサイト訪問、感謝いたします。