Nami

クライアントワーク

解説ページへ

LPサイト

解説ページへ

動画を使用したレスポンシブサイト

解説ページへ

SASSでのコーディング

point

• ・Sassのmixinを使ったレスポンシブサイト
• ・メインのカラーコードを変数化
• ・marginやpaddingの値を8pxの倍数に設定

サイトを見る

ECサイトのトレース

point

• ・最大幅を指定したグリッドレイアウト
• ・cssはモバイルサイズから指定（モバイルファースト）
• ・ドミナントカラーを使ったデザイン
• ・可変のブロックに固定値のマージン
• ・スクロールするとグローバルナビがページ上部に固定
• ・スマホ時にはハンバーガーメニュー
• ・タッチアイコン作成

サイトを見る

APIを使用したシングルページ

point

• ・ロゴはフリー素材をIllustratorで編集して作成
• ・スクロールするとグローバルナビがページ上部に固定
• ・スクロールするとTOPへ戻るボタンを表示
• ・lightboxとbxsliderの実装
• ・新着情報は$.loadを使って外部ファイルを読み込む
• ・Googleカレンダー、Googleフォーム、Googleマップ埋め込み
• ・YouTube、twitter、Facebookの埋め込み

サイトを見る

splitレイアウト

point

• ・PCは画面を５０％で分けたスプリットレイアウト
• ・スマホではギャラリー部分を横スクロール
• （-webkit-overflow-scrolling:touch使用））

サイトを見る

videoタグを背景に使う

point

• ・object-fitを使って動画をvideo要素にはめ込む
• ・スマホでは動画から静止画に切り替え
• ・ボタンにhover.cssの使用

サイトを見る

楽しいおかず

point

• ・画面幅に合わせてカラムが落ちていくグリッドデザイン

サイトを見る

枝豆隊長

point

• ・ロゴは既存のものからトレースしSVGに編集
• ・pcでは２カラム、スマホでは１カラムのレイアウト
• ・メニューはスマホで２段に

サイトを見る

うちのにゃんこ

point

• ・スマートフォン利用者を自動的にスマホ版サイトへ誘導
• （.htaccessファイルを使用）
• ・スマホ版サイトではスマホらしいUIで作成
• ・スマホ版topへ戻るボタンはIllustratorで作成
• ・スマホ版はAOSで動きをつけ猫を登場させた
• ・タッチアイコンを作成

サイトを見る

無限スクロール

point

• ・plugin『clever-infinite-scroll』使用
• ・各コンテンツページにはトップページに自動的に戻るリダイレクト機能を実装

サイトを見る

Cafe de Felica

point

• ・Photoshopでカンプを作成し、コーディング
• ・ロゴ画像をSVG形式で作成
• ・webアイコン（Font Awesome）を使用
• ・３つあるコンテンツ部分にホバーの設定
• ・ファビコンを作成し設定

サイトを見る