ウェブページでベクター形式のSVG画像を使うと、拡大しても画像が荒くならない、アニメーションできるなど、様々なメリットがあります。Illustratorからイラストやロゴを適切にSVG形式で書き出して、ウェブページに挿入する方法を、2回に分けてご紹介します。 アイコンやロゴをSVG形式で納品する際に困らないよう、普段ウェブに関わらないグラフィックデザイナーさんにも知っておいていただきたい内容です。 SVGとはSVGはScalable Vector Graphics の略で、XMLで書かれたベクター形式の画像です。 SVGを使うメリットウェブページでSVG形式の画像を使うと、以下のようなメリットがあります。 テキストエディターで編集可能SVGはXML ベースのテキストファイルなので、テキストエディターで開いて編集することができます。 例えば、CSSでサイズや色を変更することが可能です。 アニ

1954年に始まった桑沢デザイン研究所の歴史は、ここで学んでいた卒業生たちによって積み重ねられています。いつの時代でも様々な研究と挑戦を繰り返し、その成果として多くの記憶に残る作品を生み出してきました。当時は写真やビデオといった手法でその記録は残されてはいるものの、その一つ一つを取り出すのは容易ではありません。 しかしインターネットの時代に於いては、毎年積み重ねられていく素晴らしい作品たちを丁寧にアーカイブしていくことも桑沢デザイン研究所の歴史を正しく積み重ねる大事な作業だと考えます。 今回新たに立ち上げた「桑沢卒展アーカイブ」では整理された図書館のように数多の学生作品を分類し、年代 / 分野 / ゼミ / さらに様々なキーワードによる検索を可能とし、画像のみならずテキスト、映像や音源などによって構成される学生の作品ページを閲覧することが可能になっています。 このサイトでは、まずはこれから

小西秀和です。 現在、AWSの静的ウェブサイトホスティングで入門するAWS Amplify(Console、CLI) － 概要編などAWSのサーバーレスな静的ウェブサイトホスティングをテーマにしたブログ記事を執筆しています。 今回もAWSは関係しますが、フロントエンドに近い話題で、最近動向が本格的になってきたと感じているPWA(Progressive Web Apps)について私が自主的に学習した内容を記事にしてみました。 私の場合はAmazon S3、Amazon CloudFront、AWS Certificate Manager、Amazon Route53を使用した静的ウェブサイトに最小限のコンテンツをデプロイしてPWAの実装について学習しました。 また、Lighthouse Report ViewerというPWAなどの品質テストができるツールを使用して、PWAの基準に合格し、Pe

CSS2では、directionやunicode-bidiプロパティが定義され、横書きの複雑なレイアウトを行うアラビア語などの双方向言語(Bidi)が扱えるようになっていました。CSS3では、テキストの進行方向に関する仕様は「Writing Modesモジュール」にまとめられ、Bidiに加えて縦書きへの対応などが追加されています。 Writing Modesモジュールでは、行の進行方向、文字の進行方向、文字の向き、などの書字方向全般の仕様が定義されています。 この記事は、 2017年7月18日時点のEditor’s Draftを解説したものをベースに、2019年12月10日に勧告化された仕様にアップデートしたものです。 参照URL: https://www.w3.org/TR/css-writing-modes-3/

CSS Gridの立ち位置や基本を見直し、実践的なパーツやUIを構築して、Webのレイアウトを自在にコントロールできるようになることを目指した１冊です。

OGP画像シミュレータとは？ FacebookのOGP画像は正方形で表示されたり横長で表示されたりするため、デザインがとても大変。 そんな時に便利なのがこのOGP画像シミュレータ。 デザインしたOGP画像をドラッグ&ドロップし、タイムライン上でどう見えるかシミュレートしてみましょう。 https://ogimage.tsmallfield.com/ 1200 x 630 px 以上推奨 https://developers.facebook.com/docs/opengraph/creating-object-types/#properties 最低でも 600 x 315 px、また大きければ大きいほど良いため 1200 x 630 px 以上の画像サイズが推奨されています。画像がクリッピングされるのを防ぐため、縦横比をなるべく1.91:1に近づけるようにしましょう。 （2014年01月

概要 職業ソフトウェアエンジニアを目指す方々にオススメしたい書籍トップ10です 以下の観点から選定しました 10年後でも変わらない、流行にとらわれず長く役に立つ、ソフトウェアエンジニアリングにおいて普遍的な知識 特定のプログラミング言語やプラットフォームやツールに精通するのではなく、現代のソフトウェア開発の哲学・文化の全体像が把握できることを優先 200～300ページくらいで初心者でも読破できる 400～500ページくらいの本もあるが、それらは辞書的に使うのがいい あえて10冊に絞り込んだので、ここに含められなかった書籍も当然あります CI/CDやDevOpsに関する本も入れたかった… デザインパターンに関する本も入れたかった… DDDやClean Architectureなどシステム設計に関する本は意図的に入れていない 真・プログラミングスクールに通うくらいならこの本を読め10選を書きま

タイポグラフィとデザインルール設計についての記事です。Webサイトの文章の読みやすさに焦点を当てています。 このWebサイトをご覧いただいた方に感想を聞いてみたところ、ありがたいことに「読みやすいですね」であったり、「見やすくて良いですね」と言っていただけることがあります。読みやすいと感じていただけるのは、とても嬉しいことです。その一方でなぜ「読みやすい」と感じていただけたのか、「読みやすい」とは具体的にはどういうことなのかを改めて考えたいと思います。 「読みやすさ」を決める要素を分解することでタイポグラフィの理解が深まると考え、このWebサイトの構築にあたって意識したことや設計方法について書き出してみました。 意識したことはWebサイト全体の統一感と秩序の維持 このサイトを構築するにあたって、タイポグラフィのルール設計で意識したのは「サイト全体の統一感と秩序の維持」です。情報の優劣がわか