PugでSVGをインクルードして記述を楽する方法

PugでSVGをインクルードして記述を楽する方法

ここ最近SVGを使用することがすっかりスタンダードになってきましたが、SVGタグをコードに直接記述するのは見通しが悪くなったりごちゃごちゃしてしまうので億劫になってしまうこともあるかと思います。
Pugを使用していればSVGファイルをインクルードさせるだけで簡単に記述できるので、その方法をご紹介します。

行間を基準としたバーティカルリズムをWebデザインに使用してみて

今までWebデザインをする際、垂直方向の余白はベースとなる最小のpxを決め、その数値の倍々になる値を使用してデザインをしていました。
例えば、最小の値を10pxとした場合は、20px/40px/80pxのような規則性です。
しかし、行間を基準としたバーティカルリズムを利用した方がキレイかつ効率的にデザインができるのではと思い、いくつかのプロジェクトで試してきた感想をまとめます。

行間を基準としたバーティカルリズムをWebデザインに使用してみて

サーバー移転・ドメイン移管をしなきゃいけなくなった時に知っておくと良さそうなこと

Webサイトのリニューアルをする際、様々な事情からサーバー移転やドメイン移管をすることが多いです。
それなりに体制のしっかりしている制作会社であれば、サーバーサイドのエンジニアやWebの知識に長けた営業・ディレクターが対応してくれますが、小規模な制作会社やチームだとサーバーなどの知識が浅いコーダーが対応をすることがよくあります。
僕自身も小規模な制作会社で働いていた頃は対応をしてました。
そこで、サーバー移転・ドメイン移管をすることになった時に、調べて助かった・知っておいたら助かったという情報をご紹介します。

サーバー移転・ドメイン移管をしなきゃいけなくなった時に知っておくと良さそうなこと

[Photoshop]レイヤーを選択するだけでテキストレイヤーの内容をクリップボードにコピーできるスクリプト

Webデザインツールとして、SketchやXDなどさまざまなツールが普及してきてはいるものの、まだまだPhotoshopでWebデザインをされている方は多いかと思います。
Photoshopからコードへテキストデータをコピペする際の手順を、少しだけ簡略化できるスクリプトを作成したので、ご紹介します。

[Photoshop]レイヤーを選択するだけでテキストレイヤーの内容をクリップボードにコピーできるスクリプト

Webridge Meeting SP29 デザイン批評基礎講座～カッコいい、イケてるから卒業しよう～にいってきました

デザイン批評をする上でどのように下準備をすればいいのかということを中心とし、下準備を受けてどのようにデザインを相手に伝えるのかということを学ぶセミナーだったように感じています。
デザインを相手に伝え、デザインを批評をするために作る「デザインブリーフ」はとても魅力的な手法です。

Webridge Meeting SP29 デザイン批評基礎講座～カッコいい、イケてるから卒業しよう～にいってきました

Automatorを使って「今日の日付フォルダ」を、選択したフォルダに作成する方法

ファイルを管理する際、フォルダ名を日付にして管理をすることありませんか？
僕の場合は、お客さんから支給していただいたファイルは、支給してもらった日の日付をフォルダ名にして管理をしていたり、なにかと日付をベースに管理を行っていることが多いです。

ただ、今日の日付のフォルダを作成しようとした時に、毎回のように「今日って何日だっけ？」とカレンダーを確認することに手間を感じていました。
そこで、Macに標準インストールされているAutomatorを使って、「今日の日付」のフォルダをワンクリックで作成する方法をご紹介します。

Automatorを使って「今日の日付フォルダ」を、選択したフォルダに作成する方法
1 2