松本芳郎

コーディングばかりやってるデザイナーです。 時々、趣向を変えたものも書きます。

松本芳郎

コーディングばかりやってるデザイナーです。 時々、趣向を変えたものも書きます。

最近の記事

2021年のふりかえり

年明けてしまったけど、2021年は色々あったので寝る前に振り返っておきます。 転職とジョブチェンジ今年の5月にマネーフォワードに入社。くわえて、デザイナーからフロントエンドエンジニアへのジョブチェンジです。5〜9月末までは新規サービスの開発でバリバリReact書いたり、初のスクラムとの出会いでバタバタしつつも学びの多い日々を過ごしてました。その後10月は新規サービスを離れ、3人ほどのデザイナーチームのリーダーになり今に至る。チームをリーダーとして引っ張る経験は初めてでした。

    • 「できる」の錯覚

      2020年11月に、スペインで美術品が専門家以外の人の手で修復された結果、別物になってしまう事案がまた起きたそうです。文化保全、または修繕の専門家のいづれかが関わっていれば回避できたのかもしれません。 ある問題に対して、その道の素人が専門家と同等の成果をもたらすことは困難です。それでも、この構造は形や規模を変えて、私たちの身近に溢れていると思います。 専門家は何が違うのか 私はWEB領域のデザイナーです。ビジュアルデザインが得意とは言えませんが、レイアウトや分かりやすさと

      • CSSの設計に関する雑記

        CSSはとても壊れやすいです。 この問題を克服するための手段として、クラス名やディレクトリ構造に対して運用ルールを設けるといった手段が取られてきました。 機械的なルールの限界時に、運用ルールは、UI(ユーザーインターフェース)から離れた、機械的なルールを採用してしまうことがあります。 この例は、CSSのクラス名の命名規則の中に見ることができ、連番や過度な省略表記といった符合的なクラス名を生み出します。 /* 例:クラス名に連番を当てる */.btn-01 {}.btn-0

        • 2018年をぽろぽろと振り返る

          2018年の始めに僕は今年の抱負を掲げておりました。その抱負をもとに、今年を振り返っておこうと思います。(注: 中盤からグダグダです) 下のリンクは、ほとんど更新していない私のブログです。『2018年にやりたいこと』と題して、その中で抱負を述べたのです。 ざっくり説明すると、[ デザイン・フロントエンド・分析 ] の分類の中で、やりたいことを思いつくまま書きなぐったものです。 2018年12月30日の僕の視点で、全体を解釈し直して要約してみました。 2018年12月30

        2021年のふりかえり

          感覚を伝えるとは読み手の体験を参照すること

          4年前に出会って以来、ずっと好きな文章がございます。 この文章をもとに、感覚を伝える文章 というを考えてみました。クリスマス・イブですし。 ぼく かえる みつけた しみそう くさのところへ いきました (宮城まり子「私は教育経験三十年」より ) ところどころ日本語として誤った箇所があります。しかし、なんというか、好きなのです。この文章は、[言語表現法講義]という本の中で紹介されたもので、書いたのは障害を持った子供です。 次の文章は先生の添削によって、正しい文章に添削され

          感覚を伝えるとは読み手の体験を参照すること

          夕焼けとくじら

          地元の駅は、ちいさい割に利用者が多い。 その駅舎は、老朽化と利用者の増加のため再開発中である。数年前から解体と施工が始まったが、外観からは未だに全容が掴めない。 この駅をめがけて小さな川が流れていて、駅へ到達すると地下に掘られたトンネルに滑り込んでいく。川沿いは、小さな飲み屋が並んでいて、私はそこを歩いて帰る。駅舎とうって変わって、店々の様子は変わらないようだ。 川沿いを進むと、見上げるほどの高さの国道が見えて、その下を通る。古い家が並び、小さな家から聴こえるラジオが語気

          夕焼けとくじら

          Sketchで "インラインSVG" 用のアイコンを作成するときの注意点

          Sketchで作成したアイコンをインラインSVG※で使用した時に、ブラウザ上でアイコンの表示が壊れてしまったことがありました。 その時の経験を踏まえて注意点をメモしておきます。 ※ インラインSVGとは、HTMLにSVGのコードを直接挿入することです。 SVGが他のSVGの影響を受けてしまうサンプル作りました。 アイコンはMaterial Designから拝借しました。書きだしはSketchです。 ハートの影響を受けて、更新アイコンまで見た目が半分になっている状態です。(

          Sketchで "インラインSVG" 用のアイコンを作成するときの注意点

          海外のデザインシステムに見る、気になる実装 〜 SassのMixin`exports` 〜

          デザインシステムは、IT系サービスのトレンドとして注目を集め続けております。そんなデザインシステムですが、世間で言及される内容は、デザインシステムの役割や意義、内包されるデザインパターンと行った、デザインよりの話がほとんどのように感じます。 でも、実装だって面白いんです。海外のデザインシステムは、Github上でソースコードを管理されていることが多いです。つまり、タダで覗き見できるのですねぇ。 ということで、不定期ですが、僕がデザインシステムのコードを覗いて、気になった実装

          海外のデザインシステムに見る、気になる実装 〜 SassのMixin`exports` 〜

          Sketchプラグイン `DesignToken2Code` を作ってみた

          はじめまして。松本芳郎と申します。 デザイナーですが、コーディングばかりやっているものです。 DesignToken2CodeというSketch プラグインを公開いたしました。Sketchデータ内のシェイプからSASS用のカラー変数をコマンド一発でシュッと作成するものです。 「初めてのプラグイン作成!初めてのOSS!」といった私的事情もあり、やりきった気持ちになってしまいそうです。 しかし、作ったツール以上に、ツールを通して自分の考えを公表することが大事だと、会社の凄腕

          Sketchプラグイン `DesignToken2Code` を作ってみた