Web design

I am in charge of creating, updating, and modifying corporate sites, LP, and HP.

1. Production time
2. Outline
3. Concept, etc.
4. Tools used

コーポレートサイトやLP、HPの制作及び更新・修正などを担当しています。

1. 制作時間
2. 概要
3. コンセプトなど
4. 使用ツール

https://www.mst-covid19-pcr.com/

1. 3 months (from requirements definition to implementation)
2. This is a renewal design of the landing page for PCR testing. Responsible for everything from requirements definition to wireframes, design, and implementation.
3. This is an LP with both BtoB and BtoC in mind. The version before the renewal had many elements, and the explanations were long and specialized, making the design difficult for general users to understand. Therefore, we identified and organized the elements, built it from the wireframe stage, and narrowed down the goal of "getting users to buy'' to the minimum necessary wording and elements, making it clear and easy to understand.
4. Wix/Photoshop/Illustrator/XD

1. 約3ヶ月(要件定義〜実装まで)
2. PCR検査のランディングページのリニューアルデザインです。要件定義からワイヤーフレーム、デザイン、実装まで担当。
3. BtoB、BtoCどちらも意識したLPです。リニューアル前のものは要素が多く、説明等も専門的で長かったため一般ユーザーには分かりにくいデザインになっていました。そこで要素を洗い出し／整理し、ワイヤーフレーム段階から構築し、ゴールの「ユーザーに購入してもらう」を何頭に必要最低限の文言・要素に絞り、すっきり分かりやすくしました。
4. Wix/Photoshop/Illustrator/XD

1. 3 weeks
2. This is a Advertising banners design. 
3. This is an advertising banner on an EC site aimed at increasing customer numbers and raising brand awareness.
4. Photoshop

1. 約3週間
2. 広告バナーデザインです。
3. 顧客数を増やす、知名度を上げることを目的としたECサイト内広告バナーです。
4. Photoshop

https://www.rapport-star.com/Pages/Company

1. 2 months (from requirements definition to implementation)
2. This is a renewal design for the corporate site. Responsible for everything from designing sitemaps and wireframes.
3. In particular, we renewed our existing website with the goal of increasing the number of employees in mind.
4. Photoshop/Illustrator/XD

1. 約2ヶ月(要件定義〜実装まで)
2. コーポレートサイトのリニューアルデザインです。サイトマップやワイヤーフレームなどの設計からデザインまで担当。
3. 特に採用数を増やしたい、という課題を念頭に既存のHPをリニューアルしました。
4. Photoshop/Illustrator/XD

https://www.rakuten.co.jp/yumemiya/

1. 6 month (from idea to implementation)
2. I was in charge of the design renewal of our company's EC site. I was in charge of everything from design to coding.
3. Before the renewal, the homepage lacked uniformity in design such as banners, and was made narrower to match the width of the old display, making it difficult to see. Therefore, the design concept is simple so that the products stand out, and the width is wide, and there are two sidebars so that various information can be posted. Various information at the top can be seen at a glance without scrolling. I did so. We also made the main banner considerably larger and thinned out the number of banners to make it easier to see which products we wanted to promote. We have also added the date in the latest information space so that you can see that it is updated frequently. Also, by placing it under the main banner group, I added some emphasis. For the category section, we analyzed the number of searches, etc., and placed the three most frequent categories in the main space at the top. At the bottom, we have created a category column for regular customers, sorted by series.
4. Photoshop/Illustrator/RMS

1. 約半年(発案〜実装まで)
2. 自社ECサイトのデザインリニューアルを担当しました。デザインからコーディングまで全て担当しました。
3. リニューアル前のHPはバナーなどデザインの統一性が無く、また昔のディスプレイ幅に合わせ狭く作られていたので見にくさが問題でした。そのためデザインは商品が目立つようシンプルをコンセプトに、幅を広くし、色々な情報を載せれるようサイドバーを二つに増やし、スクロールしなくても一目でTOPの色々な情報が目に入ってくるようにしました。またメインバナーをかなり大きくし、且つ数を間引く事により宣伝したい商品が分かりやすいようにしました。またこまめに更新している事が分かるよう新着情報スペースに日付を入れました。またメインバナー群の下に入れる事によって抑揚をつけました。カテゴリー部分は検索回数などを分析し、頻度が高い３つを上の方のメインスペースに入れました。下部分には常連のお客様向けにシリーズで分類したカテゴリ欄を設けています。
4. Photoshop/Illustrator/RMS

リニューアル前/Before renewal

1. 1 week
2. I am creating a company website. I redesigned the existing website using Illustrator based on the design, and then started coding. I was mainly responsible for changes and corrections.
3. When coding, I took notes on which images and elements were connected to which code so as not to confuse them. Also, after the only web designer quit, I researched the parts I didn't understand on the internet and then made corrections.
4. Photoshop/Dreamweaver

1. 約1週間
2. 会社のHP制作です。既存のHPデザインを元にイラストレーターでリデザインをしてから、コーディングを行いました。主に変更・修正を担当しました。
3. コーディングの際、大量にある画像や要素を混乱しないようにどれがどのコードに繋がっているかなどメモをしながら作業を進めました。また、唯一のWEBデザイナーの方が辞められてからは解らない部分はネットなどで調べてから修正していきました。
4. Photoshop/Dreamweaver

http://www.total-bc.com

1. 2 days
2. This is an LP production for a beauty salon. Another designer had created a rough design, and then I took over and created the unfinished parts while looking at the instructions. I was in charge of the design and coding part.
3. I created it while looking at the instructions and thinking about how to create and modify it. I tried to make the text easy to read.
4. Photoshop/Dreamweaver

1. 約2日
2. 美容サロンのLP制作です。他デザイナーが大まかなデザインを作っており、その後引き継ぎ未完成の部分を指示書を見ながら制作しました。デザイン・コーディング部分を担当しました。
3. 指示書を見ながら、どう作成・直すべきか考えながら制作していきました。文字の見やすさを心がけました。
4. Photoshop/Dreamweaver