font-cursive

制作実績
これまでに制作した物の一部をご紹介いたします。
               
ランディングページ
DATA
-制作内容
ランディングページ(1ページ),レスポンシブ対応
-担当範囲
コーディング
-使用技術
HTML, Sass(CSS), jQuery
-Plugin
Drawer.js, Wow.js (jQuery)
ABOUT

実在するブランド様の許可をいただいてAdobe XDのデザインデータをもとに、HTML/CSSコーディングいたしました。アニメーション(wow.js)を使ってふんわりと画像が表示されるようにしました。お問い合わせフォームも実装しております。

URL: https://lp1.mari316.com/
※Basic認証にてアクセス制限をかけております。
User: user, Pass: password
                       
                       
ポートフォリオ
DATA
                           
-制作内容
ポートフォリオ2ページ,レスポンシブ対応
-担当範囲
コーディング
-使用技術
HTML, Sass(CSS), jQuery
-Plugin
Drawer.js (jQuery)
ABOUT

Figmaのデザインデータをもとに、HTML/CSSコーディングいたしました。ピクセル単位で調整し、レスポンシブ対応済みです。お問い合わせフォームはGoogle Formを埋め込みました。

                       
             
                       
Webサイト
DATA
                           
-制作内容
トップページ+下層3ページ, レスポンシブ対応
-担当範囲
コーディング
-使用技術
HTML, Sass(CSS), jQuery
-Plugin
Drawer.js, Wow.js (jQuery)
ABOUT

Adobe XDのデザインデータをもとに、架空の温泉旅館のHTML/CSSコーディングいたしました。CSSアニメーション、カレンダー、ブロークングリッド、JSを使った各種機能(モーダル、タブ切り替え)、縦書き、パンクズリスト構造化などの実装をしました。

URL: https://ishikadan.mari316.com/
※Basic認証にてアクセス制限をかけております。
User: user, Pass: password
                       
Webサイト
DATA
                           
-制作内容
トップページ+予約ページ, レスポンシブ対応
-担当範囲
コーディング, Wordpress構築
-使用技術
HTML, Sass(CSS), jQuery
-Plugin
Drawer.js, Advanced Custom Fields,Custom Post Type UI,Breadcrumb NavXT, MW WP Form
ABOUT

Photoshopのデザインデータ(※)をもとに、HTML/CSSコーディング、Wordpress導入まで行いました。
(※デザインデータは、実在の会社様の許可のもと使用させていただいております。)

カスタムフィールドによるページ内コンテンツ追加機能、予約フォーム(カレンダーから日付選択、郵便番号から住所自動入力)、SNSタイムラインやGoogle Mapの埋め込み、などが主な機能です。

URL: https://fujiya.mari316.com/
※Basic認証にてアクセス制限をかけております。
User: user, Pass: password
                       
Webサイト
DATA
                           
-制作内容
トップページ+下層ページ, レスポンシブ対応
-担当範囲
コーディング, Wordpress構築
-使用技術
HTML, Sass(CSS), jQuery
-Plugin
Slick, Advanced Custom Fields,Custom Post Type UI
ABOUT

Photoshopのデザインデータ(※)をもとに、HTML/CSSコーディング、Wordpress導入まで行いました。
(※デザインデータは、実在の会社様の許可のもと使用させていただいております。)

既存サイトからカスタム投稿をインポートをしました。カスタムフィールドによるページ内コンテンツ追加機能、パララックスエフェクト、メガメニュー、アコーディオンメニュー、スライダーなど実装しています。

                       
URL: https://leasetokyo.mari316.com/
※Basic認証にてアクセス制限をかけております。
User: user, Pass: password
             
ランディングページ
DATA
-制作内容
ランディングページ(1ページ),レスポンシブ対応
-担当範囲
コーディング
-使用技術
HTML, Sass(CSS), jQuery
-Plugin
Wow.js (jQuery)
ABOUT

Adobe XDのデザインデータをもとに、HTML/CSSコーディングいたしました。CSS設計(FLOCESS), コンポーネント化を意識してコーディングをしました。 @asuma_project よりデザインをいただきました。

URL: https://move.mari316.com/
※Basic認証にてアクセス制限をかけております。
User: user, Pass: password
             
                       
Webサイト
DATA
-制作内容
Webサイト(トップページ), Wordpressオリジナルテーマ作成, レスポンシブ対応
-担当範囲
コーディング, Wordpress構築
-使用技術
HTML, Sass(CSS), jQuery
-Plugin
Drawer.js(jQuery),
ABOUT

実在する団体様より許可をいただき使用させていただいたデザインデータから、HTML/CSSコーディング、Wordpress導入まで行いました。プルダウンメニューの実装、Googleカスタム検索の埋め込み、NEWS(投稿データ)一覧表示を実装しました。

                       
URL: https://vppearl.mari316.com/
※Basic認証にてアクセス制限をかけております。
User: user, Pass: password
ランディングページ 
DATA
-制作内容
ランディングページ(1ページ),レスポンシブ対応
-担当範囲
コーディング
-使用技術
HTML, Sass(CSS), jQuery
-Plugin
Drawer.js, Wow.js, Swiper.js (jQuery)
ABOUT

ランディングページのコーディングサンプルです。Adobe XDのデザインデータをもとに、HTML/CSSコーディングいたしました。ピクセル単位で調整し、レスポンシブ対応済みです。スライダー、アコーディオン、Google Mapの埋め込み、お問い合わせフォームなどランディングページに頻出する機能を実装しております。

                       
URL: https://lp2.mari316.com/
※Basic認証にてアクセス制限をかけております
User: user, Pass: password
イベントWebサイト
DATA
-制作内容
Webサイト(トップページ, 下層6ページ), Wordpressオリジナルテーマ作成, レスポンシブ対応
-担当範囲
コーディング, Wordpress構築
-使用技術
HTML, Sass(CSS),Wordpress, jQuery
-Plugin
Drawer.js(jQuery), Breadcrumb NavXT, Advanced Custom Fields, Smart Custom Fields,Custom Post Type UI,MW WP Form
ABOUT

Adobe XDのデザインデータ(※)をもとに、HTML/CSSコーディング、Wordpress導入まで行いました。
(※デザインデータは、実在の団体様の許可のもと使用させていただいております。)

NEWS(投稿データ)一覧表示、データ投稿機能、カスタムフィールドによるページ内コンテンツ追加機能、お問い合わせフォームなどが主な機能です。

https://graduationwork.mari316.com/
※Basic認証にてアクセス制限をかけております。
User: user, Pass: pass
ポートフォリオ
DATA
-制作内容
Webサイト(トップページ, 下層3ページ), Wordpressオリジナルテーマ作成, レスポンシブ対応
-担当範囲
デザイン、コーディング, Wordpress構築、サイトリリース
-使用技術
HTML, Sass(CSS),Wordpress, jQuery
-Plugin
Drawer.js(jQuery),Wow.js, slick.js Advanced Custom Fields,Contact Form 7
ABOUT
                           

こちらのポートフォリオページです。デザイン、HTML / CSSコーディング後、Wordpress導入しオリジナルテーマとして制作いたしました。

TOPページの制作実績一覧はスライダー(slick.js)を実装しました。また画面をスクロールさせると、それに合わせてコンテンツがふんわりと表示されるようにしました。

Webサイト 
DATA
-制作内容
Wordpress(トップページ/下層2ページ),レスポンシブ対応, 既存テーマ(SnowMonkey)
-担当範囲
Wordpress構築、コーディング
-使用技術
HTML, Sass(CSS),WordPress
-Plugin
ABOUT

実在するゲストハウス様に許可をいただいて、Wordpressテーマ既存テーマ(Snowmonkey)を使ってWebサイトを作成しました。レスポンシブ対応済みです。お問い合わせフォームなど頻出する機能を実装しております。

Webサイト 
DATA
-制作内容
Webサイト(トップページ/下層2ページ),レスポンシブ対応,既存テーマ(Lightning)
-担当範囲
Wordpress構築,コーディング
-使用技術
HTML, Sass(CSS),WordPress
-Plugin
ABOUT

実在する料理教室様に許可をいただき、Wordpressテーマ既存無料テーマ(Lightning)を使ってWebサイトを作成しました。レスポンシブ対応済みです。お問い合わせフォームなど頻出する機能を実装しております。

LPデモサイト
DATA
-制作内容
ランディングページ(1ページ),レスポンシブ対応,
-担当範囲
コーディング
-使用技術
HTML, CSS, Bootstrap
-Plugin
ABOUT

Boostrap(CSSのフレームワーク)を使ってランディングページ(デモサイト)を作成しました。

ポートフォリオ
DATA
-制作内容
Wordpress,既存テーマ(Fukasawa)レスポンシブ対応
-担当範囲
Wordpress構築、コーディング,サイトリリース
-使用技術
HTML, Sass(CSS), WordPress
-Plugin
ABOUT

個人のポートフォリオ(作品集)です。既存のWordpressテーマ(Fukasawa)を使ったことで短時間でサイトの構築をすることができました。展覧会をイメージし、たくさんの作品をTOPページに表示させました。