デザイン/コーディング
デザイン/コーディング
デザイン/コーディング
デザイン/コーディング
コーディング
デザイン/コーディング
デザイン/コーディング
デザイン/コーディング
学習過程で作った制作物をここに掲載しています。
Visual Studio Codeを使用し基本的なコーディング、レスポンシブ対応やSassでの記述が可能です。また、CSS設計を意識してコーディングし、保守性の高いコードになるよう書いています。
Webサイトでよく見るハンバーガーメニューやアコーディオンUI等を素のJavaScriptで練習し、簡単な動作なら実装可能です。また、各種プラグイン・ライブラリのjQuery・GSAP・Microｍodalやスライドショーのswiper・splide・slickなど使用経験があります。
WordPressを理解するのに必要な基礎部分を勉強し軽く触れる程度です。学校課題として簡単なおみくじアプリを作りました。
MAMPを使ったローカル環境での制作とサーバーにWordPressをアップしテーマ作成をした経験があります。このポートフォリオサイトも一からHTMLで作成したものをWordPress化しています。作品実績の部分ではカスタム投稿、フィールド、タクソノミーを使用し表示させています。
オンライン教材などで学び、概念から基礎的なコマンドなどを理解しています。チームでの開発はしたことがないですが、すぐキャッチアップできるよう現在も勉強中です。
CodePenにて使いまわしたいコードや勉強したものなどをまとめてあります。
codepenへのリンクサイトのデザインはすべてFigmaで作成し、基本的な操作は問題ありません。
イラストなどの複雑な作業はできませんが、基本的な操作は可能です。作品ではサイトのロゴやアストラーザ様の地図、メニュー表を作製しました。
簡単な加工、切り抜きなど基本的な操作が可能です。バナーもphotoshopで作成しました。
タイピングゲーム寿司打で8000点レベルです。業務には支障がないレベルでタイピングできます。
1991年東京生まれで育ちは鹿児島。現在32歳で東京都内在住。
高校卒業後、千葉の化学工場にてプラントオペレーターとして5年働いたあと介護職へ転職。介護職として7年間勤務し、最後の2年間はプレイングマネージャーを経験。
モノづくりとWebに興味があり2023年12月から職業訓練校にてWebデザインを勉強し2024年6月に卒業。現在は就職活動中です。
趣味はコーヒーで色んなコーヒーショップの豆を試して淹れたり焙煎もしたことがあり、過去には職場でも自分で淹れたコーヒーを振る舞っていました。
お問合せはメールでお願いいたします。
デザイン/コーディング
1日
2ページ（入力画面と診断結果ページ）
PHPで作成した本日のコーヒーを診断するサイト
学校の課題としてphpを使い簡単なサイトを作成すること
デザイン面では簡易なサイトですがコーヒーをイメージした色合いと画像選定をしました。
味の好み、今日の気分によって全部で6つの回答が出るようPHPで作成しました。
phpを使ったデータ送信の簡単な流れを学べたと思います。phpはかなり奥が深い分野ですがある程度理解しておくと今後の制作にも役に立つ部分だと思うのでまたチャレンジしていきたいです。
デザイン/コーディング
デザイン5日/コーディング14日/改修、その他5日
3ページ
洋食店アストラーザ-A.Strada-様のサイトリニューアル
サイトが古くなっているので現在に合わせて情報やデザインを一新し、お店とお客様にとってより分かりやすいサイトにする。
色は食欲促進させる赤色をメインに真赤では店のイメージであるアットホームな洋食屋さんのイメージを損ねるので、柔らかさを入れた色合いにしました。全体的にお店の料理や店内の写真を多く使いお店のイメージができるようにしています。
ヘッダーのナビゲーションではページ数があまり多くないサイトなのでハンバーガーメニューは今回使わずに作りました。
ファーストビューには写真とお店で実際に使っている素材を使いインパクトを出しています。
お店の営業時間が短く、お客様が営業しているかをサイトに見に来ることが多いことが予想されるため、ファーストビュー下には最新情報を、そのすぐ下には案内エリアを設置しユーザーに必要な情報にすぐアクセスできるようにしました。
スマホではお店に電話することが多いと予想されるので、画面下に電話をするボタンを固定で配置しています。
そのほかお客様からお店でよく聞かれるような質問が多いことが分かったのでよくある質問コーナーを設けたことと、昔から掲載していたGoogleMapが映らなくなっていたのでイラストレーターで地図を自作し、GoogleMapのリンクも載せました。
お知らせ部分と「47周年」の部分を更新する必要があり更新作業をお店の方でもやっていただくことを考え、お店の方にHTMLの理解がある方がいらっしゃったのでJavaScriptのファイルにお知らせ情報を追加すればページトップの最新情報とお知らせセクションに挿入されるように工夫し、「47周年」はファーストビュー以外は「昭和52年]
など更新する必要がないような記載に変更して対応しました。
メニューページではスマートフォン版で縦に長くならないようタブメニューを採用し料理のカテゴリー毎に切り替えられるようにしデスクトップではアンカーリンクとしてスクロールですぐアクセスできるようなっています。また、店舗の紙メニューも観れるよう固定ボタンを押すとモーダルウインドウで見れるよう工夫しました。
その他基本的なHTMLとして正しいマークアップを意識し、構造化データを設置して検索結果でよりユーザーに情報が伝わるようにしています。
実際のサイト制作として取り組みさせていただきましたがヒアリングや素材集めなどがとても大事だと感じました。自分が思っているサイト像とクライアントが思っているサイト像が違う部分がありサイトを制作しながら修正した部分もあったので、実際の仕事として良い経験となりました。素材集めなども写真に関しては素人なのでもう少し知識や技術があればより良い素材ができたかなとも思いました。場合によってはプロにお願いしたり勉強する必要があるなと感じ、サイト制作以外の部分でも幅広く仕事の知識が必要だと再認識しました。
サイトのSSL化と店舗のメニュー表や現金のみの張り紙を新しく作らせていただきました。
旧
新
デザイン/コーディング
デザイン2日/コーディング5日
２ページ(トップとお問い合わせ)
架空の介護施設のサイト
利用を検討しているご家族様と採用強化のための施設紹介。またアクセシビリティの勉強を兼ねて意識して作成する
笑顔で照らされる介護というキャッチコピーのもとこの施設が笑顔であふれているようなイメージができるようにデザインしました。
笑顔がテーマということでメインカラーには黄色を選択し、背景のベースカラーにはやわらかい印象をもつベージュを使用しています。
使っている画像は笑顔が素敵な写真を使い、各所に笑顔のアイコンを配置して施設のイメージを強調しています。
前職が介護職だったこともあり、その知識も使いながらリアルな介護施設になるよう文章やコンテンツを考え、介護施設へは電話でのお問合せも多いので、ヘッダーのナビには連絡先をのせユーザーに必要な情報がすぐわかるよう工夫しました。
アクセシビリティを意識し、簡単にではありますがスクリーンリーダーソフトのNVDAで読み上げチェックしたことと、キーボード操作でもサイトが上手く使えるよう工夫しました。
ハンバーガーメニューを開いた際にはフォーカスが外れてどこにいったかわからなくならないようメニュー内でフォーカスがループするようにJavaScriptで制御しています。
トップページ中央のサービス紹介ページではタブメニューになっているのですが、WAI-ARIAを参考にマークアップし、キーボード操作でフォーカスが当たるとタブが切り替えられるようにしました。読み上げに関してもまずはHTMLで適切なマークアップを心がけ、読み上げに必要な部分をWAI-ARIAを参考に実装しました。
アクセシビリティにおいて大事なことはまず正しいマークアップですることが大事で、意味のある正しい使い方でマークアップをするとある程度HTMLの元々の機能でアクセシビリティが担保されていることを学びました。一般のユーザーにはわからない部分であり、実装するにあたっての労力もかかりますがどんな人でも使いやすいサイトにするには大事なことだと思いました。元々介護職だったこともあり、何かしらハンデのある方や様々な理由や背景がある方への理解も多少あるので今後仕事する上でも意識していきたいです。
デザイン/コーディング
2日
トップページのみ
学校課題で作成したバナーのギャラリーサイト
バナーのギャラリーサイト作成
掲載しているバナーに関してはphotoshopで作成しました。
バナーは模写２つとオリジナル2つがあり、サイズ違いも作成しています。
サイトデザインは簡易なものですが、ファーストビューにカードをめくるようにバナーを見せて印象付けています。
JavaScirptを使い、バナー毎にタブメニューでの切り替えやバナーをクリックするとモーダルウィンドウでバナーを見れたり、簡単なスクロールアニメーションをいれています。
ファーストビューではカードをめくるような動きをつけてバナーを見せるよう工夫しました。
タブメニューの実装ではGSAPを使いアニメーションをしていますが、他のタブメニューに切り替えたときの動作がおかしくなることがあったり、JavaScriptを使う場合には様々な不具合を修正しながら実装しなければいけないと感じました。ただ、いろいろ試して上手くいったときの達成感などは今まで味わったことがない嬉しさもありより深く勉強していきたいと思いました。
デザイン/コーディング
デザイン2日/コーディング5日
2ページ（トップとサービスのページ）
sunday flowerという架空のお花屋さんのサイト
法人向けにお花を販売していたが、一般向けに新規店舗出店をするのでそのサイト制作とロゴもまだないので作成してほしいという設定。
「日曜日のような幸せな気持ちを届ける」がテーマ設定としてあり、一般の方向けということでお客様は30代後半～40代くらいの女性で町のお花屋さんをイメージして作りました。
色はオレンジと黄色を混ぜた色をメインカラーに幸せを連想させる色合いにしてみました。
ファーストビューではテーマの幸せを届けることをイメージして画像選定しPhotoShopで作成。
サイトに来るお客様は町のお花屋さんということで何かのイベントなどで急にお花が必要になりサイトに来られる方も多いと思ったので、ファーストビューすぐ下には簡単な店舗情報を掲載して必要な情報にたどりつけるよう工夫しました。
また、おしゃれな感じがありつつもわかりやすいサイトになるよう基本英語表記を避け、あしらいで使う程度にしました。
Sassにてコーディングをし、CSS設計はFLOCSSをベースにディレクトリ構成やクラス命名をしました。
アニメーションにはGSAPを使い、トップページではスクロールすると下からふわっと出現させ視線誘導しています。
ハンバーガーメニューは開いたときにスクロールが固定されるようにしたり、スマホのフリック操作で右にフリックしたときに、メニューが閉じられるよう工夫しました。
また、トップのローディングアニメーションはページを行き来するたびに発生しないようにSessionStorageを使い制御しています。
お客様の具体像を考えてサイトを作ることでどの情報をどこに設置するか考えることができるので、デザインをする段階で意識することが大事だと感じました。今回ある程度トップページのデザインをしてあとはコーディングしながら作成したのでデザインが後付けの部分もあり、コーディング前のデザインやサイト設計が大事であることを痛感しました。コーディング前の準備でサイト制作が決まってくるので今後はある程度作りこんでからコーディングしていこうと思いました。
デザイン/コーディング
デザイン3日/コーディング4日
トップページのみ
架空のVRゴーグルのランディングページ
VRゴーグルの宣伝と販売促進
VRゴーグルの楽しさと近未来感が表現できるようデザインを意識しました。
ファーストビューではキャッチコピーと共にVRゴーグルをメインに使い商品をアピールしています。
ファーストビューから下には、動画も使いVRゴーグルを体験しているイメージで動きのあるサイトづくりを心掛けました。
架空のバナーやゲームソフトはPhotoShopを使い作成しています。
アニメーションライブラリのGSAPを多用し、動きのあるコーディングをしました。
ゲームソフト紹介エリアではスクロールすると上からソフトがランダムに降ってきて、背後の動画も切り替わるように工夫しました。
ヘッダーナビゲーションにはドロップダウンリストを、よくある質問コーナーではアコーディオンUIを素のJavaScirptで実装しました。
ランディングページの目的を達成させるための導線や情報、デザインなどまだ知識が足りずマーケティングなども学んでいかないといけないと感じました。動画やGSAPを使ったアニメーションは実装することができた部分は良い勉強になり、より達成したい目的に対して意味のあるアニメーション実装をしたり、不必要ならあえてアニメーションさせないなども考えていかないといけないと思いました。
デザイン/コーディング
デザイン2日/コーディング7日
7ページ
三角コーンを専門に販売している架空の会社のコーポレートサイト
会社の事業紹介と採用のための宣伝
コーポレートサイトのため信頼感が出るよう青色をメインカラーにし、フォントもゴシック体を使いました。
ロゴは三角コーンの会社であることがわかりやすいよう三角コーンを模したシンプルなロゴをFigmaで作成し、ボタンや下層ページのメインビジュアルに使うなどサイト全体に反復 して使い印象づけています。
ファーストビューでは何の会社か分かることと、信頼感の裏付けができるような文章をスライドショーとともに配置しました。
会社の世界観も大事と考えダミーテキストをほぼ使わず制作し、画像なども実際にありそうな雰囲気が出るよう選定しました。
Sassを使いコーディングし、CSS設計はFLOCSSをベースにコーディングしています。
なるべくサイトが重くならないようトップのファーストビューでは軽量のスライダープラグインであるsplideを使用し、プラグインを不用意に使わずその他は素のJavaScirptでコーディングしました。
トップページのスクロールアニメーションはIntersection Observerを使い画面に入ってきたら発火するように工夫しました。
サイト全体から現在地が分かるようパンくずリストの設置とヘッダーとフッターのナビゲーションには現在のページ項目に下線がつくようにしました。
初めての自分でオリジナルでのサイト制作をした作品で、やはり一からデザインを考える部分が難しく、架空の企業なので目的から考えてサイト制作するのが難しく感じた部分でした。ただ架空とはいえダミーテキストを使わずに作成したので何となくの会社のイメージができ、サイト制作にも役に立ちました。また、文章を考えることでライティングの勉強にも多少なる部分があり今後もダミーテキストを使わずに作ろうと思いました。コーディングではページ数が自分の中で比較的多くある作品で、cssのクラス命名をかぶらないようにどうするかで迷うことも多かったので、ただ作るだけではなくどう更新しやすいコードを書くか意識する勉強になりました。
コーディング
1日
トップページのみ
デザインカンプからのコーディング
Pugの練習やSass、GitHubをサイト作成しながら復習する
自分でデザインしたものではなく、配布されているデザインカンプをお借りしました。
リンク→https://moshashugyo.com
Pugの勉強のために基本的な記述を使いながらincludeで他のファイルを読み込んだり、変数やmixinを使用し作成。
また、Sassの復習やGitHubのリモートリポジトリへpushするまでを実施。
Pugは初めて触ってみたが、慣れると記述が見やすく、パーツ化もできるのでとても便利なものだと感じた。Sassなどと組み合わせると制作がとても快適に進められるように思うので上手く使っていきたい。
GitHubのリモートリポジトリへpushするまでは慣れてきたので開発する段階での練習が今後の課題だと感じた。
300×250
250×80
300×250
200×600
架空のVRゴーグルとそのゲームソフトのバナーです。実際にサイトも作りそこに載せるイメージで作成しました。
VRゴーグルの楽しさやワクワク感が伝わるようなデザインにしています。
Web上でお題を提供されている方からお題をお借りし、それを元にデザインだけ自分が行ったものになります。
お題設定
バナー設置場所：自社ECサイトのサイドメニュー
商品概要：冬限定一口チョコ。普段高いが今だけ割引価格で売っている
ターゲット：20〜40代の働く男女
イメージカラー：白、水色
バナーサイズ：W300×H280px
———————————
キャッチコピー：ちょっと一息。贅沢をお裾分け
割引期間：11月1日〜12月31日まで
割引価格：10～20％割引
冬を意識した背景や色使いにしています。ターゲットが比較的大人な方なので、高級感も出るよう明朝体を使い、デザインもシンプルにしています。
バナー設置場所：観光協会のTOPページにあるコンテンツ「お得情報」に掲載。美術館や他のアミューズメントパークのバナーも貼ってある。
ターゲット：ファミリー、10～20代学生
バナーサイズ：Ｈ200×Ｗ800px
———————————
キャッチコピー：行こうよ夢の国！発見と驚きを体験しよう！
特典：Web購入で入館チケット20％割引
適用期間：2018年1月31日まで
若い方に楽しさやワクワク感が伝わるようなデザインにしています。色も多めに使いながら楽しさを表現するために「行こうよ」の文字は一つ一つを色や角度などをずらしながら配置したり「発見」と「驚き」の文字を目立つよう縦書きにして円で囲んでいます。
バナー下部に具体的な情報を記載し、一目で重要なことが分かるよう数字は赤色で目立つようにしています。
バナー設置場所：地域の情報サイト
ターゲット：30代の女性
イメージ：ベージュをベースに温かみのあるナチュラルな雰囲気
バナーサイズ：336×280
テキスト：
保護猫カフェオープン
4月7日（日）10:00←英語表記でもOK
夢丘駅徒歩1分
20匹以上のかわいい猫がお出迎えします
新しい家族に会いにきてね
かわいい猫がたくさんいるイメージが沸くように20匹の数字を強調したり画像も使い表現しています。
中央には保護猫カフェがオープンしたことが分かるように配置し、あしらいで猫のヒゲをイメージしたものを強調線でデザインしました。
バナー下部には吹きだしを使いかわいさを出し、オープン日はフォントサイズや色を変え強調させています。
学校課題としてヘッダー画像を自由に作ってみるということで、お題を訓練校が主催する企業研修のランディングページのヘッダーとして作成しました。
会社のDX化に伴い社員のITスキルを高めたいと考えている会社の社長から指示を受け、企業研修を探している教育係へ向けたLPのヘッダーとして設定しました。
デザイン面ではIT感を出すため背景にはイメージが沸くような画像を選定し、色は訓練校のメインカラーを使うようにしました。
文章面では、まず何のページなのか分かるよう「企業研修」の文字を目立たせています。企業研修の文字を見たあとは、人がサイトを見るときの良くある流れとしてZの型があるのでそこを意識して文字を配置し、訓練校のキャッチコピーである「さらに上のステージへショートカットキーあります。」を使い太いゴシック体でフォントサイズも大きめにしてコントラストを出し強い信頼感で目を引き付けられるようにしています。
上部と下部には詳しい内容を知りたい人への導線としてリンクを押すとスクロールするイメージでナビゲーションを配置してみました。
制作実績一覧へ戻る
元々はGoogleMapでしたが、リンク切れで表示されていなかったので今回Illustratorで作成しました。
一応自作地図を作った理由としては、基本GoogleMapはお客様のスマホに元々あるもので見るのでサイトにあるGoogleMapはあまり見られず、サイトに地図を載せるなら自作が良いだろうという理由で今回作りました。
制作実績一覧へ戻る
使用ツール Illustrator
左は在籍していた訓練校生徒の名刺という架空の設定で作成してみました。訓練校のロゴを反復して使い、色もメインカラーを各所で使いイメージをより強調されるようにしています。
右の名刺はWebデザイナーの名刺として作りました。信頼感を出したかったので青を使い、上手く曲線を使いデザインしてみました。少しデザイナーとしてはもう少し装飾したりしても良かったかもしれません。
使用ツール PhotoShop
洋食店アストラーザ様の入り口に張る現金のみの張り紙が手書きであり、一緒に作れたらとの要望があったのでPhotoShopで作成してみました。
最初はバツ印でカード払い禁止や色も黄色を使い注意が向くようなデザインでしたが、店入口に張るには少し目立ちすぎて印象が気になるとのことだったので「現金のみ」の部分だけ目立たせ、あとはナチュラルな色の背景にしたりバツ印の表示はやめシンプルにしました。
使用ツール Illustrator
元々のロゴがあったのでレイアウトは変えず、カジュアルすぎる印象だったので洋食屋の雰囲気に合うようにフォントや色合いを選択してみました。
使用ツール Figma
架空サイトで作ったロゴです。ロゴはすべてFigmaで作成しました。
洋食店アストラーザ様の店舗で使うメニュー表の新規作成
アストラ―ザ様のサイトを作らせていただいた際に店舗のメニューを見てもっと分かりやすいメニュー表が作れそうだったので提案させていただきメニュー表も作ることになりました。
店舗では見開きタイプのメニューではなくお席毎に壁や仕切りにA4サイズで貼り付けお客様に見ていただくスタイルでしたので、A4サイズの2枚に収めるという制限があった中での作成になりました。
デザイン面では左や中央寄せなど統一感がなかったのでデザインの基本に習い左寄せで整列させ、カテゴリ毎に料理を分けることで分かりやすいメニューになるよう工夫しました。
料理の写真を料理毎に載せたかったですが、A42枚には収まりきらないので料理の写真をイラスト風の加工をしてポイントで散りばめて配置してみました。
制作実績一覧へ戻る
