There is no time like the present

Makino Ryosuke Portfolio Site

WORKS制作作品

WEBSITE

pastaregion
(架空のサイト)

  • pastaregion
  • 使用ツール・言語
    Photoshop、Illustrator、adobeXD、Dreamweaver、HTML、CSS、javascript、JQuery
    製作期間
    1ヵ月
    (企画1週間、デザイン1週間、コーディング2週間)
    概要
    見ている人に美味しそうなパスタを想起させるようにファーストビューを強調したサイトを制作しました。 文字色と背景色を3色までにすることでメイン画像やメニューなどの写真を強調させました。 ホワイト、ブラック、ブラウンで落ち着いた雰囲気のイメージを持つ配色にしています。
    もっと詳しく 閉じる
    ターゲット
    落ち着いた雰囲気のレストランでパスタを食べたい20～30代の女性。
    目的
    サイトを立ち上げることで知名度を上げて、客数とお店の予約を増加させる。
    制作のポイント
    ファーストビューに大きくパスタの画像を置くことで閲覧者にインパクトを与えるのと同時にパスタが食べたくなるように制作しました。セクションごと背景画像を設定してセクションの内容を印象付けるようにしました。

mineralbuyer
(架空のサイト)

  • mineralbuyer
  • 使用ツール・言語
    Photoshop、Illustrator、Dreamweaver、HTML、CSS、javascript、JQuery
    製作期間
    2週間
    (企画3日間、デザイン4日間、コーディング1週間)
    概要
    サイトの閲覧者が商品の閲覧、購入しやすいようにシンプルな作りにしました。メインカラーをブラック、ベースカラーをホワイトとして鉱石の持つ硬さや神秘性を感じられるサイトにしました。
    もっと詳しく 閉じる
    ターゲット
    職業が宝石・鉱石の加工する方。個人で鉱石を収集している30～40代の方。
    目的
    オンライン上で鉱石・宝石の販売を行って売り上げをあげる。
    制作のポイント
    アクセントカラーは黒色の中でも目立つように、水晶からイメージとして明度と彩度が高いライトブルーを設定しました。カートは鉱石と関連するトロッコに見立てたデザインにしました。

SKILLSスキル

HTML5 HTML★★★★☆

マークアップや読解など基本から応用までの記述ができ、 検索すれば大抵の機能は実装可能です。
CSS3 CSS★★★★☆

基本から応用までの記述ができ、検索すれば大抵の機能は実装可能です。 レスポンシブの実装も可能です。
JavaScript JavaScript★★★★☆

ユーザ定義関数の作成、実装といった基本的な操作とjQueryを使用した操作が可能です。
Photoshop Photoshop★★★★☆

レイヤーを使ったクリッピングマスクといった基本操作が問題なくできます。 画像や写真の編集やデザインカンプ、バナーの作成に使用しました。
Illustrator Illustrator★★★★☆

基本操作や文字のエフェクトだけでなく、図形の変形やロゴの作成に使用しました。 図を使ったアイコンやワイヤーフレームの作成も可能です。
adobeXD Adobe XD★★★★☆

デザインのワイヤーフレームやデザインカンプを作成でき、プロトタイプによる プレビューも可能です。
Dreamweaver Dreamweaver★★★★★

コーディングの際に使用し、Emmet操作可能です。ライブ画面からの class、idの設定も可能です。
wordpress Wordpress★★☆☆☆

投稿やヘッダ、フッタの設定など基本的な動作は可能です。 レンタルサーバを借りて、独自のテーマを作成中です。

PROFILE自己紹介

プロフィール

牧野凌輔

大学卒業後、通信関連のIT会社で働きました。
SEとしてシステムの基本設計や詳細設計といった上流工程や
開発、運営といった下流工程に携わる中で、
ウェブデザインに興味を持ち、
JavaScriptまで勉強中です。

色彩検定で学んだ配色を用いたイメージをもとに要望に沿ったサイトを作成します。
また可読性と整備性を上げるために、HTMLやCSSでわかりにくい部分はコメントアウトで意図が理解できるようにしています。