かつたにげんき

Code と Chord をいじる弾き語りデザイナー。 Interfeel Inc で UI 設計からビジュアルデザイン、コピーライティング、フロントエンドの実装までやっています。ギターを持っているときは基本歌っています。最近 Riot.js のロゴをデザイン。

かつたにげんき

Code と Chord をいじる弾き語りデザイナー。 Interfeel Inc で UI 設計からビジュアルデザイン、コピーライティング、フロントエンドの実装までやっています。ギターを持っているときは基本歌っています。最近 Riot.js のロゴをデザイン。

マガジン

  • フロントエンドエンジニアとデザイナーのここが困った伝言板

    • 4本

    フロントエンドエンジニア←→デザイナー 間の困った!分からん!をnote毎に提案して誰かが答えたりするための伝言板です。

  • つぶやき以上、記事未満

    Twitterにおさまらなかった、ちょっと長めのひとりごと。

最近の記事

自分は多分デザイナーだけどデザインのことは書かない、と決めたとして、自分はなにを書けるのかなと思うと、それもひとつのデザインだなと思ったりする。

    • CSSでよくやる中央揃え

      CSSでレイアウトする時に、とくに自分のなかに方法論がないと、意外と苦戦する「中央揃え」。 横方向はなんとなく text-align とかでやることもできますが、レスポンシブとか固定でないレイアウトを組む時は text-align だと小さいサイズのレイアウト用にスタイルの上書きが発生したりとか非効率になったりしがちです。 また縦方向のセンタリングは結構初心者には鬼門で、 vertical-align 設定してみたけど変わらない…とか一度は経験するやつじゃないかと思います

      • macOS 用ファイルマネージャー・ FTP クライアントの「Forklift」を 9 年使ってる僕が気に入ってるポイントなど

        先日こんなツイートをしたところ ↓ と、ぼくきっかけで購入してくれたツイートいただいたので、おすすめした手前、自分が使う上で行ってる設定とかをもう少し書いてみようと思います。 「Finderで開く」を「Forkliftで開く」 ぼくは Forklift を Finder の代わりとしても使っているんですが、そうやって使っていると、たまにほかのアプリで「Finderで開く」みたいなメニューを開いた時に、Finderが開かれるのがちょっとストレスだったりします。 その対策

        • 質が上がることで量を増やせるようになるんじゃないかと思ってたけど、量を増やすことで徐々に質を上げることしかできないのかも…少なくとも自分は。 なので、理想に近づくよりも、間違ったり未熟なままの状態でアウトプットができる心の設定を見つけるほうが結果的には近道なんだろうな

        • 自分は多分デザイナーだけどデザインのことは書かない、と決めたとして、自分はなにを書けるのかなと思うと、それもひとつのデザインだなと思ったりする。

        • CSSでよくやる中央揃え

        • macOS 用ファイルマネージャー・ FTP クライアントの「Forklift」を 9 年使ってる僕が気に入ってるポイントなど

        • 質が上がることで量を増やせるようになるんじゃないかと思ってたけど、量を増やすことで徐々に質を上げることしかできないのかも…少なくとも自分は。 なので、理想に近づくよりも、間違ったり未熟なままの状態でアウトプットができる心の設定を見つけるほうが結果的には近道なんだろうな

        マガジン

        • フロントエンドエンジニアとデザイナーのここが困った伝言板
          4本
        • つぶやき以上、記事未満
          2本

        記事

          自分の中で推敲することも大事だけど、 ありのままの考えをそのままアウトプットする、素材そのまんまを最低限の味付けで美味しく出す、みたいなスキルも必要だなと思う今日このごろ

          自分の中で推敲することも大事だけど、 ありのままの考えをそのままアウトプットする、素材そのまんまを最低限の味付けで美味しく出す、みたいなスキルも必要だなと思う今日このごろ

          チームで共有したいちょっとした Figma の使い方(順次更新)

          複数人で Figma を使っていると、お互いにこうした方がいいよ、というアドバイスが出てきたり、同時編集できるので、画面上のコメントとかでそうしたやりとりができたりしますが、 どこかにドキュメントとして情報をまとめておいた方が後々いいなということで、 チームで共有したいちょっとした Figma の使い方について、順次この記事に書いていこうとも思います。 バージョン情報(編集履歴コメント)残そう 複数人で編集していると、どういう修正が入ったか、画面を見ただけではわからないこと

          チームで共有したいちょっとした Figma の使い方(順次更新)

          グミが大人に売れてるらしいので、グミ大好きデザイナーが独断で理由を考えてみる。

          とある筋からお題が来たので、この記事について自分なりの「なぜ」を考えてみました。 この記事に書かれている以外の理由を考えてみる、というお題だったので、あえて自分の感覚値だけで理由を考えています。(なので、以下の内容は「ソースは自分」です) まず自分自身がめっちゃ記事に該当するタイプ そもそも、僕自身、めっちゃグミ買っています。 多分週に1つか2つは買ってる。 グミの最大の魅力は「食感」 食感については記事にも書いてありますが、とにかく最近のグミは「新食感」を売りにした商

          グミが大人に売れてるらしいので、グミ大好きデザイナーが独断で理由を考えてみる。

          CSSの難しさ=ビジュアルデザインのルール化の難しさ

          「HTMLとCSSはプログラミングではない」関連の話をタイムラインちょくちょく見た。 たしかにそうだけど、だから簡単かというとそうでもないこともあって。 HTMLとかCSSの記述ルールとかはすごくシンプルだし、その意味で書くために知っておかなきゃいけない概念とか色々とあるプログラミング言語に比べると単純過ぎて簡単に見えるのも分かる。 けど、特にCSSなんかはビジュアルデザインの言語化なので、書くことは簡単だけどその応用が難しくて、それはCSSの難しさというよりも、ビジュ

          CSSの難しさ=ビジュアルデザインのルール化の難しさ

          ついにAndroid版が(まだBeta版だけど)出たのでVivaldiというブラウザについて書いてみる

          もともとOperaユーザーだったこともあり、その創業者がOpera社を去ったあと、新たにリリースしたブラウザということで、バージョン1からなんだかんだ他のブラウザにたまに戻ったりしながらもずっと使い続けているVivaldi。 「実装するかどうかに迷ったら、ユーザーが選択可能な設定として実装する」(ソースわすれましたがたしかそんなようなことを言っていたはず…)という思想で、使ってみればわかると思いますがとにかくカスタマイズ性が高いブラウザです。 バグ・不具合との戦いカスタマ

          ついにAndroid版が(まだBeta版だけど)出たのでVivaldiというブラウザについて書いてみる

          ここ最近のFigmaの使い方

          以前にQiitaに書いたFigmaの個人的備忘録記事がちょうど1年前のものになり、最近のFigmaの自分なりのFigmaの使い方など見直したところを、あらためてまとめてみました。 ちなみに以下の内容は、主にUIデザインをする時の備忘録です。 8pxグリッドを共通グリッドに最近、8px単位のグリッドに合わせてデザインするのが自分ルールになっているので8pxの格子状のグリッドを、共通グリッドとして最初に登録しています。 Figmaではグリッドの設定もスタイルとして登録して使

          ここ最近のFigmaの使い方

          ルールとマナーを分けて考える。 ルールは根源的で少ないほうがいい。 マナーは具体的で寛容なほうがいい。

          ルールとマナーを分けて考える。 ルールは根源的で少ないほうがいい。 マナーは具体的で寛容なほうがいい。

          noteって「記事」体裁の投稿が多い印象だけど、この「つぶやき」ってどれくらい使われてるんだろう? というつぶやき…

          noteって「記事」体裁の投稿が多い印象だけど、この「つぶやき」ってどれくらい使われてるんだろう? というつぶやき…