フリーランスWebデザイナー・ななふの
デザイン、コーディングの勉強記録やTIPSなど

オリジナルデザイン

HTML/CSS

HTML/CSSのデモサイト、作りました

今後のWeb制作の活動として、個人事業主の方や小規模の事業者様向けにご依頼をいただけるように、目安となるデモサイトをいくつか制作したいと思ってます!まずは第一弾として、HTML/CSS/JavaScriptでのランディングページを公開します。架空のチョコレートショップ、ショコラティエNのページです。見やすく使いやすいデザインと、ほどよいアニメーションで心地よく最後まで、キャンペーンエントリーやオンラインショップにもアクセスしていただけるように制作しました。是非参考として、ご覧になってください。
2023.06.29
Design

Figmaでホワイトデーのバナー作りました。JavaScriptでギャラリー風に。

Webデザインツールの今後の主流になると思われるFigmaを使いこなせるようになりたいので、バナー作成でいろいろプラグインを試してみました。ホワイトデーにマカロンと決まっているわけではないですが、マカロンの画像が可愛かったので使用。勢いに乗って4種類作ってみたので、ギャラリー形式でご紹介したいと思います。
2024.10.03
WordPress

ブログデザイン、マイナーリニューアル。Cocoon子テーマカスタマイズ色々

WordPress無料テーマ、Cocoonの子テーマをカスタマイズして使っています。前回に続いてマイナーリニューアル。動きが分かりやすいアニメーションが増えた感じです。Cocoonのタイムラインブロックや、iPhoneでも有効なスクロール中の背景固定。SNSシェアボタンの縦表示など。jQuery不使用。Intersection Observerを使用してブラウザの負荷軽減。
WordPress

ブログデザイン、リニューアルしました

とても使いやすい無料テーマ、Cocoonの子テーマをリニューアル。トップページと記事の一覧が別ページになるサイト型へ変えました。SVGモーフィングをスライダーの枠として実装してます。ハンバーガーメニューはアクセシビリティ対応のライブラリを使用しました。ふわっと表示するアニメーションを色々な部分に仕込んでいます。Cocoonを使っている方、カスタマイズの例として是非ご覧ください。
2023.02.16
Demoベーカリーコルネ

自主制作の記録!デザイン→コーディング→WordPress化までやってみる。【コーディング編②】HTML完成、デモサイトを公開

駆け出しWebデザイナーの自主制作記録。Adobe XDでデザイン、HTML/CSS/JSでコーディング。WordPressオリジナルテーマ化までを記録していきます。 この記事ではAdobe XDでデザインした全ページをHTML/CSS/JSでコーディングした結果のデモサイトを公開してます。 表示速度向上の取り組みなども書いてます。
2023.06.29
Demoベーカリーコルネ

自主制作の記録!デザイン→コーディング→WordPress化までやってみる。【コーディング編①】ひとまずトップページのレスポンシブ対応まで

駆け出しWebデザイナーの自主制作記録。Adobe XDでデザイン、HTML/CSS/JSでコーディング。WordPressオリジナルテーマ化までを記録していきます。 この記事はAdobe XDでデザインしたトップページをHTML/CSS/JSでコーディングした内容の制作メモです。
2023.06.29
Demoベーカリーコルネ

自主制作の記録!デザイン→コーディング→WordPress化までやってみる。【デザイン編①】シンプルなベーカリーサイト

駆け出しWebデザイナーの自主制作記録。Adobe XDでデザイン、HTML/CSS/JSでコーディング。WordPressオリジナルテーマ化までを記録していきます。 この記事はAdobe XDでデザインした内容です。スマホ、PC用のデザイン作成しました。実際にお店のホームページを依頼して頂けたつもりで制作中です。
2023.06.29
Design

2022年もどうぞよろしく!イラレで梅結び(トラ配色)

...
2022.01.13
Design

クリスマスカード作成してみました!

...
Design

オリジナルデザイン #5『ホワイトデーのバナー』

...