NewPost
新着記事

2024年を振り返る
2023年はCocoonのスキンgrayishを制作し、Cocoonに同梱していただきました。2024年は不具合修正なども落ち着いてきた感じです。新たにデザイン力アップのためのフルミー受講を決め、Webデザインコース初級、中級まで取り組んできました。受講前よりもWebデザインへの理解が進んだと思ってます!この記事ではフルミーで作成した作品を中心に一年の振り返りとして掲載しています。2025年は、上級コース完走と、ココナラサービスの運用がんばります!

CocoonのSNSシェアボタンを縦表示に。まずはCSSだけでやってみよう
CocoonのSNSシェアボタンはデフォルトで横表示です。SNSシェアボタンを縦に表示させているサイトをよく見かけており、そちらのほうが洗練されて見えるかも?と思ってのカスタマイズです。CocoonでもちょっとしたCSSの変更で縦表示にできます。当ブログでは更にJavaScriptで表示ON/OFFを制御していますが、この記事ではそこまではせず、CSSでできる範囲にとどめて手順を書いています。

LPのお問い合わせフォームにformrun(フォームラン)のコード型を実装してみました
お問い合わせフォームの専門の業者formrun(フォームラン)のフォームはコード型で実装すればHTML/CSSでデザインカスタマイズが可能です。Webデザイナー・コーダーの方に向けた内容になります。formrun(フォームラン)のヘルプページは充実しているのですが、自作のデモサイトに実装しているフォームを例に、今後迷わず実装できるための手順をまとめました。スパム対策としてGoogle reCAPTCHAを採用しています。

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

SwiperのVersion9はloopモードのスライド数設定に注意
ベーシックな画像が複数枚横にスライドするタイプのスライダーについて、CodePenでデモを作りました。Swiperのバージョン9では、JavaScriptの初期化設定slidesPerViewの設定値の2倍以上のHTMLのswiper-slideの記述が必要。確認したバージョンは9.0.5です。

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

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

2022年もどうぞよろしく!イラレで梅結び(トラ配色)
2022年、明けましておめでとうございます!(だいぶお正月から空いてますが・・・汗)新年一回目の投稿はお正月らしく和のデザインから〜( ^∀^)アイキャッチはTwitterにも投稿した画像です。イラレで作成しました。今年の干支は寅ということ...

クリスマスカード作成してみました!
こんにちは!最近PC環境を新しくしまして、ツール関連の操作に慣れるためにいろいろ練習してます(^ ^)Adobeツールにも早く慣れないと・・・と思って、クリスマスカードを何種類か制作してみました!今回のカードのイラスト素材は、いつもお世話に...

オリジナルデザイン #5『ホワイトデーのバナー』
こんにちは!オリジナルバナー作成第5弾になります。もうすぐホワイトデーということで、架空のショッピングモールのキャンペーンバナーを作成しました。架空のショッピングモール名:Na2 Mallななふオリジナルデザイン⑤誰に向けてファミリー層ホワ...

オリジナルデザイン #4『ひな祭りスイーツのバナー』
こんにちは!オリジナルバナー作成第4弾になります。ちょうど本日がひな祭り!(2021年3月3日)なので、架空のケーキショップのバナーを作成しました。架空のケーキショップ名:Na2factory Sweets今後もスイーツ系で何か作成した際に...

制作実績 #2『お客様サイトのアイキャッチ』
こんにちは!最近はクラウドワークスのコンペ中心に活動しております(^^)/競争率も高く、なかなか採用にならず、厳しい戦いが続いております!そんな中で採用してもらえた、記念すべき2回目の制作実績についてです!今回は、お客様に公開OKの許可をい...