かなロゴ【 shopifyコーダー | 相談受付中】

shopifyエンジニア | Wordpress | Sass | SEO | Shopify | Analitycs |
デザイン再現力＋スピード◎ | 外注・業務委託受付中💡
DMで外注・コラボ相談受付中！
ポートフォリオ👉

[かなロゴ【 shopifyコーダー | 相談受付中】 @mefan434161]

ポートフォリオサイトをリニューアルしました。

以前作っていたポートフォリオサイトをリニューアルしました。

以前のはシンプルな感じでしたが、リニューアル後は SwiprやGSAPを使用してアニメーションを多く取り入れた動きのあるサイトになっています。

▫️アニメーション

・マウスストーカーの実装
・カウントダウンを使ったローディング
・GSAPを使用したスクロールアニメーション
・ScroiiTrigerを使った強制横スクロール
・モーダル内のSwiperスライド

▫️工夫したところ

・料金表への動線を確保するためモーダル内に
スライダーを用いて設置
・実績一覧のセクションを横スクロールに変えて
一度に見れるようにしたところ
・メインナビをPosition:fixdeとbackdrop-filterを使用して
すりガラス風に

▫️苦労したところ

・モーダル内にSwiperを設置したら隠れている
スライドが認識されなくて全然動かなかった。
・ScroiiTrigerの強制横スクロールの高さ計算に苦労した。

▫️今後の課題

・ソースコードがただ詰め込まれている状態になっているのでGitHubに上げる前提でコードの管理が必須かも!!

新たな価値を提供する | Kanalogo Studio
https://t.co/bVB8EC7vSX

興味のある方は見たみてください。
サイトの感想やフィードバックを
いただけると嬉しいで��。

[かなロゴ【 shopifyコーダー | 相談受付中】 @mefan434161]

NØVA | Urban Fashion & Sneakers

NØVA | Urban Fashion & Sneakers

shopifyでECサイト制作しました

【今回使用したテーマ】
・Atelierで作成したバージョンです

【サイトの名前】
NØVA | Urban Fashion & Sneakers

【サイトのコピー】
若者向けファッションECサイト
「NØVA」 を制作しました。
テーマは
URBAN × MINIMAL × STREET

モノトーンをベースに、
LOOKBOOK・FEATURE・JOURNAL・���品ページまで
ブランドの世界観を統一して設計しています。
スニーカーやアーバンファッションが映え���、
シンプルで少しエッジのあるECサイトを目指しました。

【実装のポイント】
・商品導線を整理し購入まで進みやすく設計
・スマホでも見やすい余白とレイアウトに調整
・Shopifyの管理 ・Liquidを使用したコードの編集
・更新しやすさを意識して構築

【使用テーマ】
・Atelier

【制作期間】
・4日

【想定単価】
・6万円

【サイトURL】
https://t.co/xwuyk3VBx0

password: reongi

#ディトラ #Shopify

[かなロゴ【 shopifyコーダー | 相談受付中】 @mefan434161]

LENTO COFFEE & GOODS｜コーヒーと雑貨のオンラインストア
Tradeで作成したバージョンです
#Shopify

【今回使用したテーマ】
・今回はTradeのテーマで作成したバージョンです

【サイトの名前】
LENTO COFFEE & GOODS｜コーヒーと雑貨のオンラインストア

【実装のポイント】

・商品導線を整理し購入まで進みやすく設計
・スマホでも見やすい余白とレイアウトに調整
・Shopifyの管理 ・Liquidを使用したコードの編集
・更新しやすさを意識して構築

【使用テーマ】
・Trade

【制作期間】
・4日

【想定単価】
・6万円

【サイトURL】

https://t.co/HcwQymojnF
password: yielin

[かなロゴ【 shopifyコーダー | 相談受付中】 @mefan434161]

@Mac_OKI ありがとうございます。
参考になればいいですね。

[かなロゴ【 shopifyコーダー | 相談受付中】 @mefan434161]

私のとても参考になった本を紹介していきます。
#HTML #Web制作

��回は、HTMLで参考になった本です。

"HTML解体新書-仕様から紐解く本格入門"

------------------------------------------------------

HTMLをより深く学習する、言い換えると深く理解するためには、HTMLのシンタックス(構文)とセマンティックス(意味論)を理解することが不可欠です。シンタックスは機械的にチェックできますが、セマンティックスについては現在の技術では人によるチェックをせざるを得ないのが現状でしょう。
また、HTMLの究極の学習コンテンツはウェブ上で策定・公開されているHTML仕様といえますが、現在のHTML仕様は多数の前提知識が必要であり、中・上級者向けともいえます。
--------------------------------------------------------

Hこの本はHTMLで迷ったらこの本を読めばいいと言われるほど、HTMLとしての技術書として詳しく掲載されています。
HTMLの歴���、構造、タグに関して全て理解できるほど
詳しく掲載されていますのでHTMLに関してわからないことがあ��ばおすすめの本です。

[かなロゴ【 shopifyコーダー | 相談受付中】 @mefan434161]

先日購入したディトラの学び放題コース
今から何受けようか迷っています。

気になっているのはAI活用とNext.jsを用いたサイト制作
この2つから受けてみようかな🤔

9月になるのが今から待ちきれない!　😁

#ディトラ

[かなロゴ【 shopifyコーダー | 相談受付中】 @mefan434161]

私のとても参考になった本を紹介していきます。
#JavaScript #Web制作

まずは、JavaScriptで参考になった本です。

"これからのJavaScriptの教科書"

----------------------------------------------------------
JavaScriptが「わかる」から「使える」へとステップアップ！

開発に必要なコードを自分で考え、自分で書けるようになるための、JavaScriptの知識と技術を1冊に凝縮！
明快で��ラスラ読めるテキストと豊富なサンプルで、初心者の基礎固めから経験者のスキルアップまで、楽しく学習できます！
----------------------------------------------------------

現在のJavaScriptの使用やコードがとても詳しく書いてあってJavaScriptの知識が網羅できます。👍

Web制作で使う範囲はもちろんのこと、
非同期処理やNode.jsのことにも触れられて
おすすめの本です。😁

[かなロゴ【 shopifyコーダー | 相談受付中】 @mefan434161]

@Webdesigner_MEG ありがとうございます。
これからも作っていく予定です。

[かなロゴ【 shopifyコーダー | 相談受付中】 @mefan434161]

LENTO COFFEE & GOODS｜
コーヒーと雑貨のオンラインストア

LENTO COFFEE & GOODS｜
コーヒーと雑貨のオンラインストア
shopifyでECサイト制作しました

【今回使用したテーマ】
・Horizonで作成したバージョンです

【サイトの名前】
LENTO COFFEE & GOODS｜コーヒーと雑貨のオンラインストア

【サイトのコピー】
ShopifyのHorizonテーマをベースに、コーヒー豆・タンブラー・コーヒー器具・ギフトなど、商品カテゴリーごとに必要な情報が異なる点を意識してサイトを構築しました。

【実装のポイント】
・商品導線を整理し購入まで進みやすく設計
・スマホでも見やすい余白とレイアウトに調整
・Shopifyの管理
・Liquidを使用したコードの編集
・更新しやすさを意識して構築

【使用テーマ】
・Horizon
【制作期間】
・1週間
【想定単価】
・6万円

【サイトURL】
https://t.co/HcwQymojnF
password: yielin

#ディトラ #Shopify

[かなロゴ【 shopifyコーダー | 相談受付中】 @mefan434161]

ただいま
Web制作のお仕事、受付中です🙌

・HTML / CSS / JavaScriptコーディング
・WordPress構築・修正
・Shopify構築・カスタマイズ
・既存サイトの修正・更新

月60時間ほど稼働可能👍

単発・継続どちらも歓迎です！
「ちょっと相談したい」くらいでも大丈夫なので、お気軽にDMください📩

[かなロゴ【 shopifyコーダー | 相談受付中】 @mefan434161]

Shopifyの有料テーマのPrestige
を試しに触ってみました。
#Shopify

Prestigeは名前どおり、
Prestige = 高級感・格式
を前面に出したテーマで
かなり完成度の高い状態から作れる有料テーマです。

カスタマイズしていくことを前提とした、
DawnやHorizonなどの無料テーマとの
違いを実感しました。👍

調べてみて分かったのですが、有料テーマは
1Store 限定なのですね、有料テーマを1つ持っていて
いろんなサイトに使っていく使い方はできそうに
ないですね😓

[かなロゴ【 shopifyコーダー | 相談受付中】 @mefan434161]

こちらの説明会に���加しました。
とてもお得な内容が盛りだくさんで
受ける���かないと思い
購入しました。

9月から楽しみです。
待ちきれない！！

#デイトラ

[しょうへい｜デイトラ代表 @showheyohtaki]

【重大発表】デイトラ、まるごと生まれ変わります

9月、#デイトラ は
「学び放題」に生まれ変わります！🔥

これまでの「コースを1つ選んで学ぶ」形から、AI活用まで含めた40種類以上の講座をまるごと学べる形へ。デイトラ史上、最大のアップデートです。

きっかけは、この1年のAI��進化です。

正直、1つのスキル単体でできる仕事は、AIとの競争がどんどん激しくなっています。一方で、複数のスキルを組み合わせてAIを使いこなせる人には、むしろチャンスが広がっている。

だったら、学ぶ側に「1つだけ選ばせる」仕組みのままじゃダメだ。そう考えての決断です。

いま運営メンバーが総力戦で、それぞれの専門分野にAIを掛け合わせた新講座も仕込んでいます。
もちろん僕も作っています。

そして気になる価格ですが、
実質2コース分の価格で、既存の10コース以上の講座が見放題になる予定です。

さらに8月中は、特別なオファーも用意しています。
この中身は説明会だけでお話しします。

その第一回の説明会は、今夜21時から！

▼今日の会場はこちら
https://t.co/HAMzG1GXhJ

今夜が難しい人向けに別日程もしっかり用意しているので、都合の良い日にぜひ参加してください👇
https://t.co/qwJQZkwJoZ

説明会でお会いしましょう！👍

[はにわまん @haniwa008]

第4回 #デイトラチャレンジ AI編スタートします✨

お題は「AIを活用した架空の幼稚園のサイトの1ページ構築」

話題のAIを使って、1週間でどこまで完成度を高められるか、にチャレンジします💪

最優秀賞の人には Amazonギフト券3,000円をプレゼント！

お題の詳細は画像から▼

デザイナー、コーダー問わず誰でも自由に参加可能です。
たくさんのご参加お待ちしてます☺️

----------

【デイトラチャレンジ AI編とは？】

「AIってどこまで使えるんだろう？」
最近そう感じる方も多いのではないでしょうか？🤔

短納期で作りきるには、もうAIの活用が前提の時代。
そこでAIも含めて使えるものは全部使いながら、1週間で仕上げることをテーマにしました！

自分が手を動かすところ、AIに任せられるところ。
その線引きの感覚は、触ってみないと掴めません。

今��AIの現在地を、自分の手で確かめてみてください！

#デイトラ

お題の詳細は画像から▼

[ちい🐼 | Web制作で人生に選択肢を @tsurupiyooo]

家にいながら色んな場所で作業ができる！
ポモドーロタイマーサイトを作りました🕰️
添付はCM動画です🐣

・25分集中、5分休憩の4サイクルでポモドーロ
・カフェ、飛行機、ビーチ、夜の静かな部屋、雨モードで場所や音を変えながら、ひよこと一緒に作業
・今ポモドーロ中の人数や、一言メッセージが流れるので自分以外の誰かが頑張っている気配を感じられる

リプ欄にURLがあるので、Web制作の学習など、作業のお供に使ってみてください☺️

[かなロゴ【 shopifyコーダー | 相談受付中】 @mefan434161]

株式会社 JAPANNEXTさん
コメントありがとうございます。
モニターは縦にしてプログラミング用途に使わせてもらっています。
これからも快適に使っていきます。

[かなロゴ【 shopifyコーダー | 相談受付中】 @mefan434161]

私の仕事場の環境のお話をします。

今の私の作業場所で使っているのは、

メインPC ・・・iMac
サブモニター ・・JapanNext
IPAD ・・・・・11inch
トラックパッド ・・・・・Apple製
マウス ・・・・・Apple製

になります。
デュアルモニターとトラックパッドと
マウスの組み合わせがやはり快適です。😆

Figmaを使う時、ピンチイン、ピンチアウトできるのが
ありがたいです、皆さんが使っている
おすすめのガジェットがあれば教えてください。

[かなロゴ【 shopifyコーダー | 相談受付中】 @mefan434161]

よかったら、
みんなの使っているスライダーを教えてください。

[かなロゴ【 shopifyコーダー | 相談受付中】 @mefan434161]

軽量・高機能スライダーのSplideを使ってみました。
#Splide #Web制作

SplideとはSplideは柔軟性に富み、
軽量かつアクセシビリティに優れたスライダーライブラリです。

簡単な記述で複数枚表示、サムネイル表示、縦方向に移動するスライダーなど多彩なスライダーを使えます。

何より公式サイトが日本語でわかりやすく、
カスタマイズも簡単でこちらの方が使いやすいです。

皆さんはスライダーは何を使っていますか?

[デイトラ【公式】 @daily_trial]

＼ 結果発表🎉 ／
#世羅フォトコン2026 特設サイト
Webデザイン公募、受賞作品が決定！
━━━━━━━━━━━━━

世羅��× #デイトラ のコラボプロジェクト、
フォトコン特設サイトのデザイン公募には
30件を超えるご応募をいただきました✨

世羅町の皆さんによる投票の結果を発表します！

🏆 最優秀賞（採用）
すいさん（@suisui_d_esign）

🥈 優秀賞
ざわさん（@zawa9150）
まりもんさん（@marimonweb）

🌟 デイトラ賞
haruさん（@haruharudesign）
ふくもちさん（@pukpuk29）
あすかさん（@asuka_web1）

おめでとうございます！🙌
最優秀賞のデザインは、
当イベントの特設サイトとして
本制作していきます。

▼入賞者の作品一覧
https://t.co/8PkawZrArV

クライアント様からいただいた講評は
リプ欄でご紹介します👇

[かなロゴ【 shopifyコーダー | 相談受付中】 @mefan434161]

インテリアショップ | LUMIA HOME
Dwellで作成したバージョンです

【今回使用したテーマ】
・今回はDwellのテーマで作成したバージョンです

【サイトの名前】
インテリアショップ | LUMIA HOME

【実装のポイント】
・商品導線を整理し購入まで進みやすく設計
・スマホでも見やすい余白とレイアウトに調整
・Shopifyの管理
・Liquidを使用したコードの編集
・更新しやすさを意識して構築

【使用テーマ】
・Dwell
【制作期間】
・1週間
【想定単価】
・6万円
【サイトURL】

https://t.co/5lXTIes3Hk
password: dautwe

#ディトラ #Shopify