GridGuidを使用してグリッド設計プロセスを自動化するGridGuidを使用してグリッド設計プロセスを自動化する2020/1/24ブログTweetPocketこんにちは松井です。cssでグリッド設計を使用する際に、内部に含む列や余白数を設定する必要があります。自分で実装するよりも、GridGuidというwebアプリを使う方が良いようです。GridGuidは、完全無料サービス、サイズに関係なくあらゆるwebサイトに適応可能、グリッド生成を完全に自動化してくれます。使い方はシンプルで、必要な列の数と、最大幅を入力するだけです。通常だと2で割り切れるので、素数は避ける方が良いようです。webサイトの一般的な最大幅は以下。columns均等に分割できれば、任意の幅を選択可能で、入力フィールドに値を入力すれば自動更新してくれます。上部の数字を調整すると、グリッド表示が自動更新されてるのがわかります。ピングの書き出しもできるので、フォトショなどのデザインツールに取り込むこともできます。シェイプをツールを使わずに済むので、大幅に時間を節約できます。グリッドをブックマークしたり、webサイトの共有urlを発行してシェアする事も可能です。ツールの使用は完全無料でとても使いやすく、個人で仕事をしてる全てのWEBデザイナーにお勧めです。元ネタは、こちらhttps://www.hongkiat.com/blog/gridguide/まとめ海外の技術記事や、デザインやエンジニアの記事は、言わずもがな非常に有益なものが多いです。海外の記事を要約しながらブログとして配信することで、英語を身近に感じれ、尚且つ技術も身に付くので、一石二鳥です。今後も厳選して、ブログに取り入れていこうと思っています。今回はこの辺で!PROFILE松井貴史1984年熊本生まれ。RUBYDESIGN.代表プロダクトに関わるUI設計が得意です。デザインだけではなく、現在エンジニアリング部分などにも領域を広げています。物と物をsnsで繋ぐマッチングサービスmonocrewを運営。オンクリ2019/11/17知るだけでデザインがよくなるデザインの基本とコツCONTACTチームでのサービスデザインが得意です。ご相談は、お問い合わせフォームをご活用ください。