今回は巷で話題のグラフィックツール「Affinity Designer」の使用感を確認するために、夏っぽいシンプルなアイコンを作って試してみました。Affinity DesignerはUIが日本語に対応していますし、料金も買い切りの6000円なので気軽に手にできます。訳あってPNG形式のみですが、商用利用もできるのでお気軽にダウンロードしてくださいね！Affinity Designerの使い方も簡単に紹介します！
続きを読む

Webフォントとしておしゃれなフォントが使えるサービスで人気なのがGoogle Fontsですね。無料で手軽に使える便利サービスです。しかし、Webフォントを提供しているのはGoogleだけではありません。デザイナー御用達のAdobeも「Adobe Fonts」を提供しています。今回はこのAdobe Fontsの使い方を紹介します。
続きを読む

色関連の解説をしたり、記事を書く時に、カラーコードのRGB値をダーッと一覧で見たい！という機会がちょこちょこありまして。グラフィックツールや既存のWebサイトでもできますが、もっとサクサク進めたくなって「Quick HEX to RGB」というツールを作りました。Vue.jsを使ってみたので、制作方法をかいつまんで紹介します。

続きを読む

手軽にWebサイトを作成するサービスは多々ありますが、「You Don’t Need WordPress」というWebサービスはGoogleドキュメントと連携させるという、今まであまり見なかった角度から発足したCMS。「WordPressは必要ないよ」という挑戦的なネーミングも気になったので、さっそく試してみました！
続きを読む

Chromeのデフォルトだと、新規タブを開くとよくアクセスするWebサイトが表示されますね。以前はSpeed Dial 2を使っていましたが、無駄にそれらのWebサイトをチェックしてしまったりと作業効率が下がっていたので、「シンプルなToDoリストが表示したい！」と思いあれこれ調べてみました。ついでに面白そうな拡張もあったので記事にしましたよ。みなさんのお気に入りが見つかりますように！
続きを読む

皆さん、使っていますか？Chrome DevTools。日本語ではデベロッパーツールと呼ばれていますね。Webサイトの構成やCSSの検証が手軽にできちゃう、制作者の必須アイテム！Chromeにデフォルトでついている機能なので、今すぐに使い始められますよ。また、「デベロッパーツールの存在は知っていてもどう使えばいいかわからない…」という方向けに、使いどころポイントも紹介します！
続きを読む

普段使っているChromeをより便利にしてくれる拡張機能。私も様々なものを入れていますが、その中でもWeb制作時に使える便利拡張をいくつか紹介します。Firefoxに対応しているものもありますよ！
続きを読む

先日行ったCSS Nite in HIROSHIMA Vol.10では初めてのライブコーディングを行いながらの登壇でした。今回はそこでコーディングデモを見せるために利用したツール「Web Maker」を紹介します。
続きを読む

配色って奥が深いです。「この色いいな！」と思っても、実際にデザインに適用してみるとなんだかイメージと違ったり。このブログでも過去に「カテゴリー別配色アイデア100」という記事で配色例を紹介しましたが、その配色を見たときと使ってみたときとではまた異なる印象になるかもしれません。そこで今回はプレビュー画面で確認しながら配色を作成できるツールを集めてみました！
続きを読む

Webサイトとユーザーの架け橋となる問い合わせフォーム。ユーザーからすると単に問い合わせ先の電話番号やメールアドレスを掲載されているよりも気軽に問い合わせできますよね。今回はそんな問い合わせフォームをサクッと設置できるサービスを紹介します。HTMLとCSSで簡単なWebサイトは作れるようになったものの、問い合わせフォーム等の機能は作れない！なんていう方の強い味方！
続きを読む