R H Y T H M
A B O U T
ポートフォリオサイトをご覧くださり、
ありがとうございます。結城有紗と申します。
出身は関西で、今までは電子音響音楽を学んでいましたが、以前から興味のあったweb制作で働きたいと思い、昨年2月から札幌の訓練校で約半年間、基礎から最新のweb技術を学びました。
現在コーダーを志し、求職活動中です。
自分の役割を持って、
協力しながら一つのwebサイトを作れるように
日々楽しんで勉強しています。
W O R K S
scroll
- レスポンシブ対応
- リニューアルサイト
Cafe「azito」webサイト
制作期間:4day
リニューアル目的:サイトの視認性を高める、お店の雰囲気が伝わるサイトにする
ターゲット:少しだけ特別な一日を過ごしたい、海が好きな20~40代の男女
大阪のカフェ「アジト」さんのリニューアルを想定し、制作しました。 「海が見える」をコンセプトに、外に広がるような非対称のレイアウトで開放感を表現し、 店内の様子が分かるメインビジュアルを選びました。またカフェと並列で存在が混在していたサロン経営とレンタルスペースをひとつのセクションにまとめ、サイトマップも見直しました。
scroll
- レスポンシブ対応
- プロダクトサイト
「MEGAMEGANE」webサイト
制作期間:4day
コンセプト:海外から国内へ進出してきた既に有名なサングラス
ターゲット:オシャレに興味があり、少し良いものをこだわって買いたいと思う20~50代の男女
仮想のサングラスブランドのプロダクトサイトです。海外の日本語サイトで、インパクトとスタイリッシュさを意識しています。sassで作り直し、レスポンシブに対応させました。また、作品が同じような系統になるのを避けるため、黒を基調として制作しました。
scroll
- レスポンシブ対応
- プロダクトサイト
- バナーデザイン
「LEMON」webサイト
制作期間:2day
コンセプト:百貨店の生活雑貨コーナーなどで取り扱いのある、オーガニック志向のプロダクト
ターゲット:20~30代の女性
Photoshopで制作した「BATH LEMON」のオリジナルバナーを当ポートフォリオに載せるため、モーダルの広告として採用し、サイトを制作しました。
scroll
- レスポンシブ対応
- プロダクトサイト
「むすび」webサイト
制作期間:4day
コンセプト:古民家でおばあさんが運営する、チェーン店ではないおにぎりがメインの和食屋さん
ターゲット:老若男女問わず家族でもお一人でも、和食のお店を探している人
和風ながらも敷居が高くなく、温かみが感じられるようなサイトを意識しました。また誰でも迎え入れてくれるお店の優しさを演出するために、目に優しい配色や、文字やボタンも大きめに配置するなどアクセシビリティも考慮して制作しました。
scroll
- WordPress
- レスポンシブ対応
「富士歯科医院」webサイト
制作期間:3day
コンセプト:真面目で信頼できる地域の歯科医院
ターゲット:歯を大事にしたい人、長く付き合えるかかりつけ歯科医を求めている人
WordPressのテーマ「Lightning」使用し、仮想の歯科医院のサイトを制作しました。病院らしい清潔感や、歯医者に通われるどの世代にも見やすく感じて頂く為、シンプルなレイアウトを意識しました。今回初めてWordPressを使用してサイトを制作し、プラグインの導入やCSSカスタマイズ、サーバーへのアップロードなどを行いました。
scroll
- リニューアルサイト
- パララックス効果
「株式会社NEXTONE」webサイト
制作期間:4day
コンセプト:未来のIT人材を育成する、サポートを行う会社
ターゲット:サービスに興味のある他の企業
企業ロゴのカラーである青を中心に、仮想のリニューアルサイトを制作しました。nextoneという会社名や、スキルアップを手助けするという事業内容から、階段・右肩上がり・斜線をモチーフに制作しました。
scroll
- グループ制作
- リニューアル
「WSS」 webサイト
制作期間:2weeks
リニューアル目的:説明会参加人数の増加
ターゲット:20~30代の訓練校に興味のある女性
グループワークで、訓練校のサイトリニューアルを想定し「流行りを取り入れたデザインにする」「サイトマップを分かりやすく、見直す」ことを目標に制作しました。クライアントの要望をかなえるため、リサーチを入念に行い、常にチーム全員で情報共有して制作に臨みました。技術面では、私は主にコーダーとしてヘッダーやナビなどの共通部分、下層ページのQ&Aや、JQueryで動的部分の実装を担当しました。デザイナーさんのデザインを忠実に再現しつつ、 良さを生かすようなアニメーションを追加することで、サイトを見ている人を楽しませるように心掛けました。
scroll
- プロダクトサイト
「GREENS」webサイト
制作期間:1day
コンセプト:夫婦が営むアットホームなこだわりの植物店
ターゲット:生活の中に何か植物を取り入れたいと思っている人
訓練初期の作品で、コードの整列や簡潔さを意識して制作しました。日の当たる店舗のイメージに沿って淡い緑をモチーフにしましたが、対照的に商品写真を色鮮やかにすることで、サイトの中で一番目立つようにしました。
scroll
- プロダクトサイト
「CAFE CAMP」webサイト
制作期間:1.5day
コンセプト:キャンプに興味はあるけれど、本格的なものには手が出ない人たちが気軽に楽しめるフェス
ターゲット:キャンプに興味のある人、家族や友達同士
訓練初期に制作しました。メインビジュアルで「カフェキャンプ」がお祭りのような催しだと分かるようにしつつ、要所要所でテントの綺麗な写真を入れるなどして、本格的なキャンプに憧れがある人の興味を引くような写真選びを心掛けました。 またヘッダーの色がスクロースすると見えにくくなってしまうことを改善するため、初めてjQueryを導入しました。
S K I L L S
- HTML5
- 0からのサイト構築、Emmetの使用が可能です
- CSS3
- アニメーションやflex・gridの使用、レスポンシブの対応可能
- Sass
- scss記法でmixinやextendの使用が可能です
- jQuery
- プラグインの導入や基本的UIの記述が可能です
- Wordpress
- テーマやプラグインを使用したサイト構築が可能です
- Git
- 個人でのバージョン管理に使用(Github)
- adobe XD
- ワイヤーフレーム、デザインカンプの作成に使用
- Photoshop
- 画像編集やバナー制作など基本的な操作が一通り可能です
- Premierepro
- 動画編集の基本的な操作が一通り可能です