Web制作 
Webマーケティング 
その他
2024.10.28 その他
WEBデザイナーが作業時リアルに活用する無料便利ツール
こんにちは( ・∇・)
デザイン課のさいちゃんです。
気温の揺らぎが大きな季節ですね。
突然寒くなったり汗ばんだり毎日こんな気温がいいと思ったり（ﾗｼﾞﾊﾞﾝﾀﾞﾘ）
さて、今回は私が制作時リアルに活用している無料便利ツールをご紹介してみたいと思います。
比率計算ツール
一番使うタイミング：サイトで掲載する画像サイズの比率計算
画像サイズの比率を固定にすることで、統一感や制作・運用のしやすさも向上します。
シンプル・イズ・ベストなサイトですね…無駄な要素が一切なく、計算も速いので使いやすいです。
ちなみに、比率は3:2や4:3にすることが多いですが、グラフィカルに魅せたい部分は比率を決めないで制作することもあります。
8の倍数表
一番使うタイミング：さまざまなパーツやコンテンツのサイズを決定する
WEBサイトデザインでは8の倍数を基本としてデザインを組むことでコーディングがしやすくなります。
アートボードのサイズやコンテンツエリア、ボタンのサイズやテキストのマージンまで、基本的には8の倍数で組んでいきます。
オフィスでは紙を貼っていつでもみられるようにしていますが、リモート環境の際は開きっぱなしで作業していることが多いです。
このスプシを公開してくださっている制作者様に感謝…！
DeepL翻訳：高精度な翻訳ツール
https://www.deepl.com/ja/translator#en/ja/
一番使うタイミング：見出しのあしらいで英文をつけたい
見出しのあしらいや、キャッチコピーを考えるときは日本語で考えてから翻訳して、コンテンツに合った文字数やニュアンスを模索します。
Googleの翻訳よりもネイティブなニュアンスの翻訳をしてくれるので、とても便利です。
このサイトですぐに思いつかない時はChatGPTも活用しています。
大文字小文字・全角半角・ひらがなカタカナ変換
https://tool-taro.com/char_case/
一番使うタイミング：あしらいの英文を大文字に変換したい
サイト内の英文を全て大文字で統一している時は大活躍です。
他にはAdobeXDで作業している時は検索置換がないので、半角括弧を全角にまとめてすることなんかも可能です。
文字数カウント
https://sundryst.com/convenienttool/strcount.html
一番使うタイミング：文字数制限をしているコンテンツにダミーテキストを入れる
投稿記事などの動的なコンテンツのデザインを崩したくない時に、テキストの文字数を制限するシステムを導入することがあります。
その際にデザイン段階では入るテキストがまだ未定であるため、仮のテキストを規定の文字数入れてデザインを組んでおきます。
OGP画像シミュレータ
https://ogimage.tsmallfield.com/
一番使うタイミング：OGP画像を作成したときに実際の様子をシュミレートする
OGP画像とは、WebサイトやSNSでのシェア時に表示される画像のことです。SEOに直接的に関わってくるので大切なコンテンツになります。
作成した画像をドラック＆ドロップするだけで一気に色々なサイズのシュミレートをすることができるので便利です。
1200×630のサイズで作成しますが、1:1で表示されることも念頭に置いておく必要があるので、地味に悩みます。
WAYBACK MACHINE
一番使うタイミング：公開終了してしまったサイトやリニューアルしたサイトの過去の状態を確認する
このサイトはURLを入力するとそのサイトのアーカイブを無料で閲覧することができるサイトです。
公開終了してしまったサイトをもう一度閲覧したいと思ったこと…ありませんか？（ ˘ ‿ ˘ ）
弊社では案件公開後に部内に反省などを共有する場としてレビュー会を行なっています。
サイトリニューアルをした際、既存の状態を共有してそこからどんな要望で、どんなご提案をしていったのか、部内に共有する際に一番よく登場します。
毎回の振り返りが、仕事にメリハリと成長を生みます！
まとめ
いかがでしたか？デザイナーの方はあるあるサイトが多かったかもしれません。
初めましてがありましたら、ぜひブックマックバーに追加して使ってみてください☆
東京のホームページ制作・Web制作のお問い合わせ、お見積り依頼、相談、質問は
こちらのお問い合わせフォームよりお願いいたします
お問い合わせはこちら