デザインや実装などで役立ちそうなサイトをまとめてみた

ブックマーク整理をしていたら、いっぱい出てきたのでこの機会にジャンル別にアップすることにしました。

あまり使っていないものもありますが、それも含めて役立つ方もいそうですので、全てピックアップしていきます。

掲載順は整理して出てきた順番に任意にアップしてますので、何か意図があるわけではありません。ご了承ください。

それぞれに対する説明などはたくさんある関係で省略させていただいております。

また素材や画像等の商用利用の可否などは公式サイトでご確認ください。

それではみていきましょう!

Webデザイン

S5-Style

S5-Style公式サイトはこちら

codefolio

codefolio公式サイトはこちら

UI LIBRARY

UI LIBRARY公式サイトはこちら

Parts.

Parts.公式サイトはこちら

AAA11Y

AAA11Y公式サイトはこちら

Check WebTech

Check WebTech公式サイトはこちら

81-web.com

81-web.com公式サイトはこちら

Dark Mode Design

Dark Mode Design公式サイトはこちら

ちょうどいいWebデザインギャラリー

ちょうどいいWebデザインギャラリー公式サイトはこちら

1GUU

1GUU公式サイトはこちら

bookma!

bookma!公式サイトはこちら

Responsive Web Design JP

Responsive Web Design JP公式サイトはこちら

MUUUUU.ORG

MUUUUU.ORG公式サイトはこちら

URAGAWA

URAGAWA公式サイトはこちら

Footer

Footer公式サイトはこちら

サンカラム

サンカラム公式サイトはこちら

バナーデザイン

BANNER LIBRARY

BANNER LIBRARY公式サイトはこちら

Bannnner.com

Bannnner.com公式サイトはこちら

アプリデザイン

UX-mov

UX-mov公式サイトはこちら

UIデザイン

UI Pocket

UI Pocket公式サイトはこちら

ロゴデザイン

ロゴストック

ロゴストック公式サイトはこちら

ポスターデザイン

typo/graphic posters

typo/graphic posters公式サイトはこちら

イラスト

イラストAC

イラストAC公式サイトはこちら

いらすとや

いらすとや公式サイトはこちら

いらすとん

いらすとん公式サイトはこちら

ベクタークラブ

ベクタークラブ公式サイトはこちら

TOWN illust

TOWN illust公式サイトはこちら

フキダシデザイン

フキダシデザイン公式サイトはこちら

イラサポフリー

イラサポフリー公式サイトはこちら

Storyset

Storyset公式サイトはこちら

フォント

モジザイ

モジザイ公式サイトはこちら

画像

AI Stock

AI Stock公式サイトはこちら

Everypixel

Everypixel公式サイトはこちら

PNGWing

PNGWing公式サイトはこちら

Adobe Stock

Adobe Stock公式サイトはこちら

ぱくたそ

ぱくたそ公式サイトはこちら

フォトック

フォトック公式サイトはこちら

フォトスク

フォトスク公式サイトはこちら

Photo Chips

Photo Chips公式サイトはこちら

sozaiya.com

sozaiya.com公式サイトはこちら

BEIZ images

BEIZ images公式サイトはこちら

背景素材フリードットコム

背景素材フリードットコム公式サイトはこちら

フリーテクスチャ素材館

フリーテクスチャ素材館公式サイトはこちら

Paper-co

Paper-co公式サイトはこちら

アイコン・シルエット・ピクトグラム

Phosphor Icons

Phosphor Icons公式サイトはこちら

Figicon

Figicon公式サイトはこちら

icooon-mono

icooon-mono公式サイトはこちら

icon-pit

icon-pit公式サイトはこちら

iconmonstr

iconmonstr公式サイトはこちら

SILHOUETTE DESIGN

SILHOUETTE DESIGN公式サイトはこちら

FLAT ICON DESIGN

FLAT ICON DESIGN公式サイトはこちら

Human Pictogram 2.0

Human Pictogram 2.0公式サイトはこちら

Vector Icons and Stickers

Vector Icons and Stickers公式サイトはこちら

パターン

Pattern Monster

Pattern Monster公式サイトはこちら

Bg-patterns

Bg-patterns公式サイトはこちら

ホームページの背景画像 壁紙 無料

ホームページの背景画像 壁紙 無料公式サイトはこちら

Simple Repeat

Simple Repeat公式サイトはこちら

フレーム

FRAME Design

FRAME Design公式サイトはこちら

素材Good

素材Good公式サイトはこちら

モックアップ

Mockup World

Mockup World公式サイトはこちら

Unblast

Unblast公式サイトはこちら

unDraw

unDraw公式サイトはこちら

ManyPixels

ManyPixels公式サイトはこちら

動画・サウンド

Mixkit

Mixkit公式サイトはこちら

キャッチコピー

きゃっこぴ

きゃっこぴ公式サイトはこちら

実装・コーディング

Animista

Animista公式サイトはこちら

Min-Max-Value Interpolation

Min-Max-Value Interpolation公式サイトはこちら

Fluid-responsive font-size calculator

Fluid-responsive font-size calculator公式サイトはこちら

cubic-bezier.com

cubic-bezier.com公式サイトはこちら

CSS Grid Generator

CSS Grid Generator公式サイトはこちら

CSS Gradient

CSS Gradient公式サイトはこちら

Clippy

Clippy公式サイトはこちら

Lorem Picsum

Lorem Picsum公式サイトはこちら

codic

codic公式サイトはこちら

イージング関数チートシート

イージング関数チートシート公式サイトはこちら

Glass Morphism

Glass Morphism公式サイトはこちら

Neumorphism.io

Neumorphism.io公式サイトはこちら

ファイル変換

MOV動画をGIFに変換|Adobe Express

MOV動画をGIFに変換|Adobe Express公式サイトはこちら

Squoosh

Squoosh公式サイトはこちら

まとめてWebp変換器

まとめてWebp変換器公式サイトはこちら

QR Codes Generator

QR Codes Generator公式サイトはこちら

convert Heic to JPEG for free

convert Heic to JPEG for free公式サイトはこちら

確認関連

Wayback Machine

Wayback Machine公式サイトはこちら

PageSpeed Insights

PageSpeed Insights公式サイトはこちら

Markup Validation Service

Markup Validation Service公式サイトはこちら

ご利用環境チェックツール

ご利用環境チェックツール公式サイトはこちら

Statcounter

Statcounter公式サイトはこちら

Can I use

Can I use公式サイトはこちら

以上になります!

めちゃくちゃあって大変でした。中には更新が止まっているものもありそうですが、一応載せておきました。

少しでも皆さんのお役に立てますと幸いです。

無印良品週間で個人的に買いたい食品をピックアップ!

今回は来たる10月25日(金)〜11月4日(月)に向けて、個人的に買いたい食品をピックアップします。

完全に自分用メモです。皆さんのお役に立つかは分かりませんが好みが合えば有益だと思います笑。

画像は掲載できないため、テキストベースで載せています。それでは見ていきましょう!

お菓子

カレー

パスタ

冷凍

その他

てことで以上になります。全部は買えませんが、ここから厳選して買いたいなー

フリーランスで未知のものに挑戦する時の心構えと決めごと

今回はWebサイト制作での失敗関連のエピソードをまとめていきつつ、フリーランスで未知のものに挑戦する時に個人的に重要だと思った部分についてまとめていければと思います。

それではみていきましょう。

サポート窓口があるか

例えばフォームはこれを導入したいとか、ECサイトのプラットフォームはこれを使いたいなどがあると思います。

その際、マニュアルをみて不明な点が出てきた時に、公式窓口にヘルプを求められる体制があるかどうかは事前に確認しておくことをおすすめします。

経験がなければ事前に検証しておく

自身のサーバーやドメインがあれば、事前に検証することができます。今では無料で用意できるところも多くなってきました。

ただし、サーバーやドメインを無料で用意できても、他のプラットフォームは有料でないと導入できないものも中にはあります。その際はいざ実践というかたちになるので、どんな機能が必要になるのかを確認した上で、マニュアルの該当箇所を読み込んでおくことが必要になってきます。

ここで不明点が出てきた時にサポートに聞いてみて、どのくらいで回答が得られるのかを計算しておくこともよさそうです。

勝手にGOが出ないようルール化しておく

自分は普段は実装を主に担当していますが、Webサイト制作は基本的にチームで役割ごとに動いていきます。

例えばですが、ディレクターとクライアント間で、勝手に実装できるかわからない機能面の話が前に進んでしまうこともあるかもしれません。

実際には実装側で調査する必要があるのに、そういった相談もなく前に進んでしまうと後々トラブルに繋がってしまうこともあるでしょう。

これは実装に限らずですが、できるできないの判断を下すときは、なんとなくで進めるのはやめた方がいいです。一次情報やサポート窓口などで確実にできる判断となってから進めるのがよいでしょう。その時にチームの担当者とあわせてコミュニケーションがとれると、導入に備えた準備なども進めやすくなると思います。

導入するサービスの最新の動向は常に追っておく

導入しようとしているサービスが、突如大きく仕様が変わることも想定されます。

料金プランが変わったり、新しくできることが増えたり、既存のものでもやり方が変わっていたりなどが起こる可能性もあります。

なかには情報が更新されてから、実は以前やりたかったことができるようになって導入しようという方向に動くこともあります。そうするとクライアント側からの信頼も高まりますよね。

通常よりも時間が多くかかるという想定

未知のことに立ち向かうため、スケジュールは多めにとっておきましょう。

できれば後ろが決まっていないものがいいですが、決まっていてもいなくてもスケジュールは想定より長めに引くことがおすすめです。

自分の場合は、未知のことであることをクライアント側に事前に伝えてスケジュール調整をしていくと思いますが、ここは人それぞれだと思います。

やりたいことができない場合の代案を用意しておく

これは経験値が多くないと難しいことですが、もしやりたいことができない場合、別のアプローチができないか考えてみましょう。

中には、本来やろうとしていたことよりもさらによくなることもあります。

そしてそれが、デファクトスタンダードになることもあるかもしれません。

業務範囲を明確にしておく

これは未知のものに限らずですが、書いておきます。

どこからどこまで自分が対応すべきところなのか。これを明確にしておかないと大変なことになります。

自分は結構苦手な部分になりますが、実際にやってみて後から色々と気づくことがあります。

個人的なポイントですが、事前に提示される業務内容を見て、実際に作業している自分を具体的にイメージすることかなと思います。

その中で、いろんなことが想定できますので、質問・確認リストを作って不明点を潰しておくことがおすすめです。

実際に自分が体験したこととしては、仕様が伴う実装調整や実装可否の調査などをする認識でいたが、実はそれ以外のすべてのところも自身で担当しなければならなかったということもありました。

稼働できる日程、時間帯を明確にしておく

これは未知のものに限らずですが、書いておきます。

フリーランスの割合が多いチームで組んでいるとよく起こりがちなことです。

フリーランスの場合、土日祝の休日に稼働している方もいますし、早朝や夜間関係なく稼働している方もいます。

ここで大変なのが、各担当者の稼働時間帯がチームでバラバラな時です。

土日祝に連絡しても他の方は稼働していないので、確認が進まないといったことがおきます。これは夜間や早朝なども一緒ですね。

事前に予定などをお互いにコミュニケーションとりながら管理することもできますが、休んでいる時にどうしてもスマホで通知を見てしまいますよね笑。そこで見てしまえば、頭が休まらずPCに向かってしまうことはないでしょうか。

はい、自分がまさしくそれです…

ですので、事前の予定の共有も大切ではあるのですが、各自この時間は対応できないし、連絡も見れないなどの決め事はしておくべきなのかなと思います。お互いやりやすくなりますよね。

ただし、リリース直前などはできる限り、どの時間帯でも対応できるように調整することがおすすめです。なるべくトラブルなくリリースしたいですからね。

他にもたくさんありそうですが、思いついたままに書きました。

実はブラウザって専用のものを決めるより使い分けるのが最強なのではというお話

ブラウザってほんと色々ありますよね。

Chrome、Safari、Microsoft Edgeなどが有名どころだと思います。実は他にも便利ないろんなブラウザがあります。例えばArcやSidekick、Brave、Vivaldiなどです。

今回は、ArcやSidekick、Braveを使ってみて、個人的な所感とこれからどう使っていくのがよさそうか考えてみました。ちなみにこちらの3つはChromeの拡張機能を使うことができたり、広告ブロック機能がついています。これらのことについてはこの先言及しません。

それでは具体的にみていきます。

Arcは最初は苦しいが慣れると使いやすい

まずはArcです。自分の場合は仕事、調べ物、買い物をする時などに使っています。基本は8割はArcですね。

公式サイトは下記になります。

Arc公式サイトはこちら

MacとWindows版がありますが、Windows版はまだ色々と制限されている機能もあるようです。

もし使われる場合はMacの方がおすすめかと思います。

左側にタブが表示されるUI

だいたいのブラウザは上部にタブが表示されるイメージですが、Arcは左側に表示されます。

これが他のブラウザに慣れていると取っ付きにくいと感じる方もいるようです。自分もそうでした。

ただ、このサイドバーには便利な側面があります。

  • サイドバーの上部にアイコンでお気に入りのものを登録して固定できる
  • デフォルトスペースのブックマークバーにお気に入りのリンクを登録できる
  • New Tabの下にはお気に入りに入れていないタブが追加されていく(しばらく経つと勝手に削除される)

アカウントごとにスペースに登録できる

仕事用のアカウント・個人用のアカウントで、いちいちログイン・ログアウトをして使うのが手間ですよね。要はその手間がなくなるように使えるってことです。

上部の下部のところからNew Spaceをクリックすれば作成できます。ここでは詳しいことは書きませんが、これはなかなか使えますね。

画面分割ができる

Split Viewを使うことで横にも縦にも分割できます。

2画面横並びに分割してみました。

4分割もできますよ!

もちろん縦にも並べられます。

2✖️2はできなさそうでした。もしかしたらできるかもしれません。

ショートカットに慣れるまで大変

普通に使う分には問題ないのですが、少しイライラすることもあります。

例えばお気に入りに登録しているページを開いてから、他のページを別のタブで見ていて、またお気に入りのページに戻ってみたいというような時、お気に入りに登録しているページの数が多ければ多いほど、探しにくくなります。

こういった時はcontrol+tabのショートカットを使えば探しやすくなるのですが、使わないと結構大変です。

他にも純粋な検索をしたいのに、お気に入りやすでに閲覧したページが上部の候補に出てくるなどです。

こういうケースがいたるところに存在しますので、最初は大変ですがショートカットで操作を完結できるようになると便利です。公式に載っていますので参考にしてみてください。

Arcショートカット一覧はこちら

ここでは全部の機能は紹介してませんが、他にも便利な機能がたくさんありますので、ぜひ使ってみてはいかがでしょうか。

懸念点

全てに日本語対応しているわけではないことと、今後有料になる可能性もありますので、こちらに依存しすぎないようにはしておきたいです。

Sidekickは有料プランだとめちゃ使いやすい

続いてはSidekickです。公式サイトは下記です。

Sidekick公式サイトはこちら

Chromeを使っていた方であれば、直感的に使えます。使い馴染んでいるUIだから使いやすい。これが一番ではないでしょうか。

無料では左側のサイドバーに最大5つまで使いたいアプリを登録できる

こんな感じで左側にアイコンが固定して登録されます。上部にはChromeのようにブックマークできますので、使いやすいと思います。拡張機能なども上部に表示できますよ。

ホーム画面で探したいものを検索できる

ブックマークがいっぱいの時は下記で検索して探すと便利ですね。

実際無料版ではこのくらいしかメリットが感じられないのですが、それでも必要十分だとは思います。もっと使い倒したい方には有料プランがおすすめです。ちなみに無料だと公式では下記のように紹介されています。

有料の機能は下記です。どうでしょうか。Arcでもできていた機能が追加されていますよね。Chromeに似たUIでより深く使いたい方にはおすすめかと思います。Proプランでは無料お試しもできるようですので試してみるのもいいかもしれません。

気になった方のために、もう一度リンクを貼っておきますね。

Sidekick公式サイトはこちら

BraveはYouTube視聴がおすすめ

続いてBraveです。自分はYouTube用に使っています。公式サイトは下記です。

Brave公式サイトはこちら

広告ブロックが強力

他のブラウザでは広告が出るようなページでも、Braveではほぼほぼ出ません。なんとYouTubeも今のところ出ません!

ということで有料プランに入って広告を消してまでYouTubeを閲覧するのもなーと考えている方にとってはおすすめかと思います。

※ただし、いつまで続くかは分かりませんし、YouTubeをアプリで使うといったことはできませんので、ブラウザ上で閲覧することにはなります。

Picture-in-Picture Extension (by Google)を入れることで視聴が捗る

Googleの拡張機能Picture-in-Picture Extension (by Google)を入れると、YouTubeの視聴が便利になります。

Picture-in-Picture Extension (by Google)のリンクはこちら

YouTubeを再生中に、右上の赤枠のアイコンをクリックすると、右下に再生動画が表示されます。これで他のブラウザを横断しながらでも視聴が楽しめるようになりますよ。

スマホでもアプリがあるのがいいところ

YouTubeをスマホでも広告なしで見たいなと思っている方にもおすすめです。

他にも様々な機能があります

自分は使っていませんが、Braveの広告を見ることで仮想通貨BATがもらえるというのもあるようです。

番外編

Vivaldiについて

自分は使ったことありませんが、Vivaldiは自分で使いやすいように好き勝手カスタマイズできる点が魅力的のようです。公式サイトは下記です。

Vivaldi公式サイトはこちら

マウスのドラッグ次第で色々操作をコントロールできたるするようですね。おもしろそうです。

こちらも気になっていますので、今度時間があった時に試してみたいと思います。

Arc Search(スマホ用)

これは使ってみたいと思っていてまだ使えていません。公式サイトは下記です。

レビュー動画を色々見ていると、iPhone自体のアプリの操作感と似ていておもしろい感じでした。

検索もページを横断してまとめてくれたりと、あちこちのページを見て確認する手間も省けるので、調べ物をするにも重宝しそうな感じでした。そのうち使ってみたいと思います。

まとめ

自分の現在の使い方は下記です。

  • Arc:仕事、調べ物、買い物用
  • Sidekick:Arcが有料になった時の避難先
  • Brave:YouTube視聴用、スマホ用(スマホは基本全部こちらです)

以上です!ご参考になりますと幸いです。

いまさらだけど東京建築祭レポートを書いてみる

2024年5月26日から27日にかけて行ってきました。

東京建築祭詳細は公式サイトから

なんで行ってみたのかというところですが、SLash仲間に誘われたこと、木目や自然が多い建物や歴史が感じられる建物に興味があったこと、カメラを始めたので撮りに行ってみたかったこと、父が建築関係の仕事をしていたことなどたくさんありますw

せっかくなら東京出陣じゃ!ということで赴きました。

ちなみにSLashとはなんぞや?て気になるところかと思いますが、詳細は下記からご覧ください。

Slash公式サイトはこちらから

せっかくなので事前にSLashのお仲間にも声をかけ集まることになりましたよー。

1日目

実は自分は25日から前乗りしてました。やっぱ色々観光したいので笑。

道民だし滅多に行けないのでね。下調べはかなりしました。

次の日の東京建築祭のことと、築地で仲間と遊ぶことも視野に入れながらホテルを事前に調べ、「ホテルリブマックス 東京新富町」に決めます。

最近はホテル高いですねー。ほんとびっくりします。カプセルホテルは以前泊まったことがあって自分のスタイルにはあっていなかったため、ビジホにしました。

泊まるだけだし全然よかったですね。

予定していた計画です!だいたい下記に目星をつけて回れればなーと思ってました。

  • 美術茶房 篠
  • 湯島天満宮
  • 喫茶去
  • 上野公園
  • 新鶯亭
  • EVERYONEs CAFE
  • 国立科学博物館
  • 嵯峨の家本店
  • 日本橋 お多幸本店

時間の都合ややっていないお店などもあり、全部には行けなかったですが、満足いく旅となりました!

まず上野公園のへ出向きます。歩いていると何やら上野東照宮と書かれた場所に来たのでお参りしてきました。初っ端から目的地に行けてないですねw

こういう緑の古びた雰囲気たまらないです。

鐘のハートマークもかわいいですね。

続いて色々歩き回っていると、東京藝術大学の美術館いいなーと思ったのですが、その日は残念ながらやってなかったです。他にも行きたかった飲食店があったのですが休業してました笑。こういうところはある意味持ってるなと感じてます。

歩いているとEVERYONEs CAFEを見つけたので入ってみます。中では写真を撮れなかったので、外から撮りました。もっと木の空間が多いのかなと思っていたのですが、そこまでではなかったです。あ、パンケーキはおいしかったですよー。

続いて国立科学博物館に向かいます。

歴史を感じる外見ですが、中の広さに圧倒されました。とても1日じゃ回りきれない広さですね。体力がないと足が棒になります。マジで笑。

恐竜ですね。子供の頃を思い出します。

名前忘れたけど、このサイズ感が好き。

いやーこれたまんねーっす。日産のフィガロやパオを思い出す。現行車もこんな感じのデザインを求む。

こういう天井も何気に好きなんだよなー

くたくたになりながらホテルに着いたが、問題は夜ご飯。エンジニア界隈で豆めしが話題になっていたので、ついでに行ってみる。お店は「日本橋 お多幸本店」です。

最高ですね!こういった濃いタイプのおでんは初めてでした。調べてみるとこういうおでんは札幌でも食べられるお店があるようでしたので、今度行ってみます!

夜ホテルに戻ったら、お仲間から連絡が。ということで東京建築祭前日から飲んでました笑。お店は忘れました。

1日目終了です!何キロ歩いたかわからないですが、20キロくらいは歩いたでしょう。もう満喫できました。

2日目

一応計画では、朝は築地をぶらぶら食べ歩きしつつ、その後から本格的に東京建築祭を回る予定でした。夜はSLashのみんなと合流予定です。果たして順調に回れるでしょうか。

築地へ向かって歩いていると趣のある建物に出会します。思わずパシャリ。こういう雰囲気とっても好きです。

さあ着きました!何を食べるかとかは調べる時間がなく、とりあえず入ります。

ここで卵焼きを食べます。甘めでふわふわした感じでした。デザート感覚で食べたい方にはおすすめですね。

もちろんお寿司もいただきます!

こんな感じでちょこっとずついろんなものを食べ歩きできるの最高ですね。お仲間はお酒も飲んでました笑。

しばらく歩いていると波除神社に出会います。

神社よりも木に目が行きました。御神木でしょうか。

途中おしゃれなデザインやなーと思ってパシャリと撮ります。うん、これ好きだなー

朝早かったからかあまり混雑はしていませんでしたね。

お土産は、田村商店のナッツを買いました。試食でおいしかったので、間違いないと思います。勤め先に持って行ったらあっという間になくなりました笑。次もたぶんここで買います。

さて、築地本願寺へ向かいます。

そういえばお寺のお参りってどうやるんだろうな。と書いてて思いました。神社しか知らないので、今後調べてみようかと。

築地本願寺の中には入りませんでしたが、外見だけ撮っています。

海外のお客さんが多い印象でした。東京建築祭やってる雰囲気はあまり感じられず、マニアックなのかなと思っていました。

続いて水天宮へ向かいます。今日もたくさん歩きます。昨日の疲れは残っていますが、慣れているので大丈夫かなと。

歩いている途中で丸いおしゃれなものが気になりパシャリ。

やっぱ自分は丸いもの好きなんだなーと改めて思う。

水天宮に到着しました。

なんか自分は以前から水に縁がある感じがしています。スピリチュアル的なお話にはなるかもですが、小樽に行った時も散歩していたらふと目の前に水天宮が現れました。

これも何かの縁かもしれませんので、そのうち貴船神社に行くのかもしれません。水の神様を祀っているようですので。

続いて江戸屋に向かいます。

なんとここで大行列ができていました。並ばずにその場をさりますが、これまでスムーズに行けていたのに意外と人気なのか?東京建築祭と思い始めます。

で、近くの日証館に向かいます。

ご覧の通りこちらも行列です。なんかやべえな、こりゃあ今日はどこも無理なんじゃないかと思い始めます。

ということで中には入らず外観を中心に色々撮っていました。

日本橋ダイヤビルディング。こちらも人混みがすごかったです。

またなんかおしゃれなのが笑。とりあえず撮る。

続いて三越へ。なんかここまできて小樽に建物の雰囲気似てるなーと思い始める。水天宮もあるし偶然じゃないのかなー

よくわからないオブジェも撮っておく笑。横の鳥も気になるなー

この建物の7階くらいだったかで、劇場の中に入ることはできたが撮影は禁止だったので写真はなし。でも雰囲気ある模様や壁や天井の質感をリアルに感じられてよかったです。

とりあえずこの後また1人合流する予定だったので、ここでお開きにすることに。たぶんどこも混んでるだろうという見解で明日回ることにした。

夜にみんなと合流するまでの間、3人で東京駅の中で飲食することに。ここでの飲食があとあと大変なことになります。

とりあえず、甘い系のお酒で乾杯!

お刺身!最高だったー

酒のあて。

日本酒を嗜む。

この時点で結構食べてます笑。さらにここからデザートへ突入〜

この時点でお腹いっぱいなので、夕方からのみんなで韓国料理を食べて飲んでの会についていけるか不安になってました笑。自分は薄々気づいていたのですが周囲を止められませんでした。楽しそうだったからねー

で、ここからは重ためのチーズタッカルビです笑。お腹が減ってるととても美味しそうなのですがね。自分たちは結構限界でした笑。

でも食べていると不思議と食べられました。なんなんでしょうね。たぶん歩きまくった結果なのかもしれません。

2次会はカラオケでしたが、自分は3曲ほどで喉が限界を迎えましたねー。皆さんノリもよく元気ですごいなと。若いってすごい!

帰りは予想通り東京駅で迷子になりました笑。夜は閉鎖されているところがあってわかりにくいです。結局地上に出てホテルを目指すことに。

3日目

さて、いよいよラストです!たぶん今日も混んでるんだろうなーと思いながら旧宮脇ビルへ向かいます。

お!空いてました。朝方は空いていそうですね。中はこんな感じです。

おしゃれですねー

なんか雰囲気よく撮れたかなーと。ボケ感も好き。

続いて【SHUTL】中銀カプセルタワービルへ行きましたが、時間帯が早すぎてやってませんでした。調査不足ですね。

外観だけ撮って後にします。途中で歌舞伎座を見つけたのでパシャリ。

さて、お次は個人的に一番気になっていたmeet tree GINZAです。抽選に外れてガイドツアー参加できなかったのが悔やまれます。

ガイドツアー中でしたので、一旦GINZA SIXへ寄り道します。

太陽の塔?をモチーフにしたオブジェでしょうか。

おしゃれな蔦屋書店がありました。

東京建築祭のコーナーも発見しました!

ではmeet tree GINZAへ戻ります。

ほんとこういう木に囲まれた空間いいなーと。

いろんな商品が展示されていました。

電球との組み合わせもいいなー

続いて、丸の内二丁目ビルへ向かいます。

拡大するとこんな感じ。

拡大すると見え方も変わってきますよねー

近くの喫茶店のフォントや木の枠組みがいいなーと思って撮影。デザイン学ぶと自然に目に映るんだよなー

続いて新東京ビルヂングへ向かいます。

外に目に止まるものがあったので撮影。色合いも素敵だなーと。

中に入ってとりあえず天井から。雰囲気あっていいなー

スタバとのコラボも念の為w

明治生命館へ向かっていると、途中気になる建物が。

明治生命館に着きました!

とりあえず看板と背景を撮ってみる。

ガラスに映る感じがいいなーと。

ピントがイマイチかな。後から屋根つけたのかな?

ラスト!東京駅!

めちゃくちゃ歩いたけど、楽しかったなー

以上!

Cursorを使ってコーディングしてみた

コーダーやエンジニアの皆さんはどのくらい使っているでしょうか。

無料で使えるのと言えば、Visual Studio Codeが代表的だと思います。

基本的にはこれだけで十分だと思いますが、CursorというAIが使えるエディタが話題になってきてましたので触ってみる機会を作りました。

それではみていきましょう。

Cursorについて

Cursorは下記からダウンロードできます。

公式サイトはこちら

何ができるのかというと、ChatGPTのようなツールをコード上で呼び出して使えるといったイメージでしょうか。

gpt-4oやclaude-3.5-sonnetなどの有名どころも使えます。

新しいバージョンのAIが登場すると割と早めに導入されるイメージですね。

Visual Studio Codeの拡張機能は引き継がれるため、気軽に使うことができます。これは便利ですねー

執筆時点での料金プランは下記になっています。

お試しで使うなら無料プランでも十分だと思いますが、実務で使うならプロプランがおすすめでしょうか。

使いたい目的に応じて検討するのがいいと思います。

Cursorを使ってみる

例として公式のキャプチャを用意して、添付して命令してみました。

回答が返ってきました。

右上の方にAsk、Copy、Applyとありますがなんでしょうか。

  • Ask:これは回答結果に満足いかない場合に再命令したい時に使います
  • Copy:コードをコピーしたい時に使います
  • Apply:変更を適用したい時に使います

ざっくりと上記のようなイメージになっています。Applyをすると下記のようになりました。

想像してたイメージとは違いましたが、なんかいい感じに仕上げてくれていますね。

で、これ自体は他のAIツールでも同様のことができますよね。ここからCursorの便利なところになります。

Cursorのエディット機能

⌘+Kまたは任意のテキストを範囲選択しEditをクリックすれば、エディット機能が使えます。
できることはチャット機能と同じですが、同じファイル内で立ち上げられるのが効率よく作業ができます。

実際に命令してみます。

回答が返ってきました!

修正前が赤色マーカー。修正後が緑色マーカーです。⌘+Yで適用する、⌘+Nで適用しないを選べます。

そこまで難しくはないですね。

一方で⌘+Lで、右側の方に画面が現れますが、「@ 」を使うとファイルやコードを辿ったりできます。

@ Codebaseを使用すれば、開発しているコード全体に対して聞けるので便利ですよ。

Cursorのサジェスト機能(Copilot++)

設定から添付部分をenabledにしておきましょう。

下記も対応しておきます。

これでコードを書いているときに、AIが予想して候補を出してくれるようになります。無料プランだと制限があるので、ある程度使ってしまうと予測が出なくなります。自分の場合はそうでした。

JavaScriptやWordPressのphpなどを書いているときは結構重宝しました。

使用感としてはGitHub Copilotに少し近いのではないかと思います。いろんなツールに課金している方にとっては、Cursorに集約するのもありな気がしました。

ほんとに最近はなんでもサブスクの時代なので結構困りますね。節約できるところは節約していきましょう。

サジェスト機能で個人的に便利なのをまとめるとこんな感じでしょうか。

  • クラス名の予測をしてくれる
  • 繰り返し系(リストなど)の予測をしてくれる
  • JSやPHPの記述を予測してくれる
  • テキストを予測してくれる
  • 綴りの間違いを指摘してくれる
  • コードのミスを指摘してくれる

個人的に便利な実例集

都道府県を出力

都道府県を手打ちしたり、コピペして持ってくるのって案外面倒ですよね。腱鞘炎にならないうちにやってもらいます。

下記のように一瞬で出力してくれます。

連番

これも案外面倒です。Visual Studio Codeのショートコードでできないこともないですが、頭の中で考えるの面倒じゃないですか。なのでこれもやってもらいます。

こんな感じで簡単に作ってもらえます。

クラス名考えてもらう(日本語から英語を推測)

これも面倒な時ありますよね。下記は少なめの例ですが、コードが多いほど便利だと思います。sectionごとにやってもらうとかがよさそうです。

回答返ってきましたが、うまくいかなかったため、再度命令。

細かいことは置いておいて、まあいい感じじゃないでしょうか。

カレンダー出力

これもテーブルなどで記載していくの面倒ですよね。年単位だとさらに面倒です。下記は月の例です。

出力されたが、年があっていなかったです。ただ曜日の始まりもコントロールできるのはいいですね。

修正します。

無事修正できました!

ソースは下記のようになりました。

十分すぎる出来ではないかと思います。

画像や手書き文字を読み取ってもらう

これはお試しでやってみました。

結果です。

両方は無理なようです。では続いて下記ではどうでしょうか。

手書きはやはり使えないですね。また文字上に線を引いて修正させるのもまだ難しいようです。

テキスト拾うの面倒なときはやってもらう

これは価格表やリストなどで使えると思います。果物のリストの例です。

見事にうまくいきました!

JSが伴う機能面を作ってもらう

今回はタブ切り替えの例でやってみましょう。

実際に生成されたのがこちら。

なかなかいい感じですね。これをカスタマイズしていけば普通に作れそうです。一応生成されたコードも貼っておきます。

タブ切り替え以外でも、結構実務で使えるレベルで生成してくれます。とはいえそのまままるまる同じコードは使わないよう注意しましょう。

環境構築(先ほどのファイルをAstroに書き換える)

環境構築もできないかなと思って試してみました。Codebaseを使って全体のファイルを見るようにして命令しました。

自動で生成してくれませんでしたが、右側にこの手順で実行してとありましたので、その通りにやってみます。

実際にできあがった画面はこちらです。タブ切り替えもいい感じにデザインしてくれました!

Chromeの拡張機能でも確認したところ、Astroが使われていました。

今後さらに発展していくと自動でやってくれるようになるのですかね。

ちなみに、このAstroからReact/Next.js構成に書き換える命令をしてみましたが、これはうまくいきませんでした。

まだ課題はたくさんありそうですが、実務で使えることも多く、いろんな発見がありました。

また何かあれば書いていきたいと思います。

WordPressでカテゴリーがまたがる連番faqを作成したい

最近WordPress案件を終えたので、ちょっと工夫が必要だったカテゴリーがまたがる連番faqについて紹介していきます。

例えば、下記のような状況の時ですね。

カテゴリーの見出しがあって、本来はそのカテゴリーごとで1番から始まればいいものを、なんとまたがって連番になっているような時ですね。

それではやっていきましょう。

Custom Post Type UIのプラグインを使う

有名なものなので、使い方はざっくりとしか紹介しませんので、ご了承ください。

Custom Post Type UIで投稿タイプとタクソノミーを登録します。調べると登録方法はいっぱい出てきますので、そちらをみながら登録してください。

投稿タイプを登録すると、WordPressのダッシュボードに自分が登録した投稿タイプが出てきます。この投稿タイプにタクソノミーを紐づけてください。

カスタム投稿は下記のように登録しました。

タクソノミーは下記のように登録しました。

紐付けは下記の投稿タイプの下部の方で行なっています。

これらを設定すると下記のように表示されます。

質問と回答を登録する

下記のように質問は見出しに、回答は中身に入れていきます。該当するカテゴリーにもチェックを入れましょう。

これをいくつか登録してからコードを書いていきます。

実際にコードを書いていく

あとは表示したいphpにコードを書いていくだけです。今回はクラシックテーマ開発でやっているため、固定ページをカスタマイズしたい場合は、page-○○○.phpなどのファイルが該当するかと思います。

今回はpage-faq.phpでやってみました。

<?php
      // カウントを初期化
      $count = 1;

      // タクソノミーのリストを取得
      $taxonomies = get_terms(array(
        'taxonomy' => 'qa_category', // タクソノミーのスラッグ
        'hide_empty' => true,
      ));

      if ($taxonomies && !is_wp_error($taxonomies)) {
        foreach ($taxonomies as $taxonomy) {
          // タクソノミーごとのカスタム投稿を取得
          $args = array(
            'post_type' => 'qanda', // カスタム投稿タイプのスラッグ
            'tax_query' => array(
              array(
                'taxonomy' => 'qa_category',
                'field'    => 'term_id',
                'terms'    => $taxonomy->term_id,
              ),
            ),
            'posts_per_page' => -1, // 全ての投稿を取得
            'orderby' => 'date',
            'order'   => 'ASC',
          );

          $query = new WP_Query($args);

          if ($query->have_posts()) {
            echo '<div class="">';
            echo '<h3 class="" id="' . esc_attr($taxonomy->slug) . '">' . esc_html($taxonomy->name) . '</h3>';
            echo '<dl class="">';

            while ($query->have_posts()) {
              $query->the_post();

              // 投稿タイトルや内容を取得
              $question = get_the_title();
              $answer = get_the_content();

              // 投稿を表示
              echo '<div class="">';
              echo '<dt class="">';
              echo '<span class="">Q</span>';
              echo '<div class="">';
              echo '<span class="">' . sprintf('%02d', $count++) . '</span> ' . esc_html($question);
              echo '</div>';
              echo '</dt>';
              echo '<dd class="">' . wp_kses_post($answer) . '</dd>';
              echo '</div>';
            }

            echo '</dl>';
            echo '</div>';
          }

          // 投稿データのリセット
          wp_reset_postdata();
        }
      } else {
        echo '<p>タクソノミーが見つかりませんでした。</p>';
      }
      ?>

何をやっているかの説明は、大まかに書いてますので、解説はしません。

またclass名の中身はからにしています。タグなどは任意のものに変更してカスタマイズいただくのがいいかと思います。

これで出力できるはずです。

今回は以上になります。実際にできないと思っていたことが実現できたのでよかったです。

ecforceでカスタマイズ画面からページを作って実装したい

かなり以前に下記ブログを執筆しましたが、改めてecforceに携わる機会があり、意外とカスタマイズ画面から操作しながらページを作っていくやり方もいいなと思い、こちらに書いてみることにしました。

前回の記事は下記よりご確認いただけます。こちらでは実際にコード編集側からゴリゴリ書いてカスタマイズしていくような流れでした。

それでは入っていきましょう!

ecforceのカスタマイズ画面について

管理画面からテーマ管理を選び、カスタマイズをクリックします。

すると下記のような画面が表示されます。実はここである程度見た目を整えることができるのです。

上記はトップ画面の例になりますが、左側のサイドバーで順番を入れ替えたり、目玉のマークで表示非表示をコントロールできたりします。

例えば商品についてみてみると、下記のように、見出しや表示対象、カテゴリーなどをコントロールできます。

つまり、今まではコードで頑張って商品を読み込んで該当カテゴリーだけ表示したいといったことも、工夫次第では、カスタマイズ上でできてしまいます。

ここで出力されたコードに基づきCSSなどで見た目を整えたり、必要に応じてJSなどを使ってテキスト表示や画像の差し替えなどを行うことで、liquidのカスタマイズを極力減らしてコーディングすることができます。

もちろん、トップ画面だけでなく、各ページにもカスタマイズは存在します。

ただ、注意点として、すべてカスタマイズだけで完結するわけではありません。

ページごとにできる・できないの制約はあります。

できない箇所は、コード編集から直接liquidを書き込んで編集しましょう。公式サイトを参考にすると分かりやすいです。難しければ問い合わせ窓口に相談してみるのもいいと思います。

公式テーマガイド

ページごとに載っていますので、分かりやすいと思います。

カスタマイズすることのメリット

保守性が高まることではないでしょうか。

お客様にとっても使いやすいことを目指すのであれば、トップのスライダーの差し替えやピックアップ関連のニュースや商品の入れ替えが自由にカスタマイズ画面からできた方が、断然いいですよね。

これをコード編集ですべて作ってしまえば、その作った人やecforceの実装に詳しい人でないと、何がどこに書いてあるのか理解が難しいと思います。サイトは作って終わりではないため、公開してからの運用面も大事になってきます。

毎回何か変更や修正があるたびに、外部に頼っていては、スピード感をもった運用もできず、せっかくのチャンスを失うリスクも高いですよね。

こういった時に自分で簡単に解決ができれば、そういった機会も少なくできると思います。

カスタマイズ実装での注意点

やはり共通で読み込まれる部分ですね。

例えば、商品一覧や検索結果一覧、商品カテゴリー詳細で読み込まれている商品は、すべて同じデータで紐づいています。こちらに同じCSSをあてれば、もちろんこれらのページすべてに反映されます。

共通している部分は結構たくさんあります。自分はまだ全体への理解が浅いのでどこが共通なのかをすべて把握しているわけではありません。

デザインによりけりですが、まずはどこのパーツが共通で読み込まれているデータなのかといった部分を理解すると分かりやすいかと思います。

他に挙げられるパーツは、見出し、ボタンなどでしょうか。

こういったところを把握していると、実装スピードも速くなるのかなと思います。

まとめ

公開後の運用面を考えるなら、できる限りカスタマイズで対応するのがおすすめです。

ただ、その分デザインに制約が出る場合があるので、ディレクターは仕様を理解した上で、クライアントやデザイナーと調整する必要はあります。

仕様にないことをやる場合はecforceサポートや実装者に確認をとった後で、動くようにしましょう。

意外とWordPressに似ているところもあるので、挑戦してみてもおもしろいかもしれません。

【GPTs】北海道イベントナビをリリースしました!

今回は、初めてGPTsで何かを作ってみようということで、北海道内のイベントを抽出してくれる『北海道イベントナビ』を作ってみました。

さらに読む

【無料】ブラウザ上でできるクソゲー『すいかスカイ』をリリースしました!

今回は、ほぼ全てAIが生成したコードをそのまま用いてゲームを作ってみることにチャレンジしています。

さらに読む