Miranda / 玉子豆腐

もう5年生なんだよ

Miranda / 玉子豆腐

もう5年生なんだよ

デザインエンジニアが考える、実装に歩み寄るFigmaを使ったWebデザイン

この記事はYUMEMI Design Advent Calendar 2022の14日目の記事になります。 お久しぶりです。今年の10月、株式会社ゆめみでデザインエンジニアチームが立ち上がり、チーム移籍をしました。デザインエンジニアの玉子豆腐です。 詳しい経緯・デザインエンジニアについては以下の記事をご覧ください。 フロントエンド歴が長いので、デザイン面で貢献できる事は何か考えたときに思いついたのが本タイトルでした。 「エンジニアってどうやってデザイン部分を実装してるの？

Miranda / 玉…

    • ロゴ作成練習記録

      毎日ロゴという本を買った。1日30分でロゴを毎日作成された石川竜太さんの本である。自分もゆくゆくはロゴとか作ってみたいな〜と軽い気持ちで手を出してみた。ゆるゆるやろうと思い、まずは5個を目標に作ってみた、その記録である。 決め方も参考にした。今日は何の日〜毎日が記念日〜から引用したり、その日が何の日かで決めてロゴを作成していく。 4月26日良い風呂の日 風の外側を湯船に、呂を人に見立てて風呂を表現した。 4月27日世界バクの日 地球っぽく丸みを意識し、バクの白い部分

      Miranda / 玉…

      • Figmaで作字してみた

        Figmaで文字のアウトライン化を使わずに作字するのにも慣れてきたので、備忘録も兼ねて過程を書き残しておこうと思う。 1.文字を決めるまずは文字を決める。好きな言葉や本のタイトル、好きな曲、適当に作った言葉などなんでもいい。今回は某曲の「蓮の台を分つ」という歌詞から辿り着いた、運命を共にするという意味の「一蓮托生」にした。 Figmaで適当なフレーム(自分はいつもインスタのサイズ)を作ったら、文字の下書きをTextで打ち込む。レイヤーの透明度を下げておくと作業がしやすくな

        Miranda / 玉…

        • HTMLとCSSで！和柄作成のすゝめ〜七宝編〜

          某鬼滅の刃でもおなじみの和柄。多分HTMLとCSSを使って描く日は待ってても永遠に来ないので、自主的に描いてみることにした。 一応何パターンか描く予定だが、市松模様は簡単すぎるので多分描かない。ごめん炭治郎……。 今回は円満・調和・ご縁の意味が込められてる七宝を描いてみたので描き方をまとめる。某ラップバトルのシブヤ代表チームのマークのモチーフにもなっているあのマークだ。 これ↓ 線のみの描き方からそもそも七宝は円のみで構成されているため、非常にシンプルな構造だ。連続し

          Miranda / 玉…

        マガジン

        • CSSでお絵描き
          2本
        • 技術？
          7本
        • 研修関連
          3本
        • ひとりごと
          3本

        記事

          GithubのWikiに画像を貼るとき用のメモ

          先日、GithubのWikiに画像を添付する機会があったがちょっと手間取ったのでまとめ。 1.リポジトリをクローンするWikiの右下にClone this wiki locallyと書かれている部分があるのでその下のURLを使ってWikiのリポジトリをクローン。 Git: remote: The `********' organization has enabled or enforced SAML SSO. To access ↑のようなエラーが出た場合は、SSHに切

          Miranda / 玉…

          GithubのWikiに画像を貼るとき用のメモ

          Miranda / 玉子豆腐

          特殊加工の視覚サンプルを作ってみた

          さて突然だがみなさん、特殊加工は好きだろうか？ ここで言う特殊加工とは特殊印刷のことで、例としてはエンボス、UV印刷、箔押しなど……もしかしたら聞いたことがない人もいるかもしれない。そもそも、使ったことがある方が稀だろう。 と、いうことで今回は特殊加工の魅力を伝えるべく、筆を取った次第である。 特殊加工の種類特殊加工には様々な種類がある。が、今回はエンボス加工・デボス加工・UV厚盛り・箔押しに絞って説明していきたいと思う。 ・エンボス加工/デボス加工 エンボス加工は、絵

          Miranda / 玉…

          特殊加工の視覚サンプルを作ってみた

          Miranda / 玉子豆腐

          最後のメタラーニング研修を受けました

          初回の研修から約2ヶ月。本日も株式会社ココスペースの方の研修をリモートで受けた。最後の研修ということで今までの振り返りと今回の研修のまとめを行いたい。 そもそもどんな研修を行ってきたのかは、1回目と2回目の記事に書いてあるので参考にして欲しい。 2回目の研修から今日までやってきたこと全員でミッションをクリアするために、それぞれ得意不得意を出し合った。例えば音声を聞いてアウトプットするのが苦手だとか、逆に文章を読んでアウトプットするのが不得意だとか。その音声や文章に関するミ

          Miranda / 玉…

          最後のメタラーニング研修を受けました

          Miranda / 玉子豆腐

          とある新入社員の日記

          株式会社ゆめみに入社して早2ヶ月半。仕事にも少しずつ関わるようになってきたこのタイミングで、研修の項目の一つにある「入社エントリーを書く」に挑戦しようと思う。 入社前のイメージゆめみと初めて出会ったのは逆求人イベントだったのだが、とにかく意味がわからなかった。イベントには個性的な会社ばかり揃っていたが、ゆめみは特に異質だった。給与自己決定？有給取り放題？すごろくで賞与を決める会社は聞いたことがあったが、同じくらい意味がわからない。 母には「絶対裏がある」、友人には「胡散臭

          Miranda / 玉…

          とある新入社員の日記

          Miranda / 玉子豆腐

          2回目のメタラーニング研修を受けました

          前回の研修から約1ヶ月。本日も株式会社ココスペースの方の研修をリモートで受けた。研修開始から約半分と言うことで、主に進捗と今回の研修内容をまとめようと思う。 そもそも研修でどんなことをしてきたのか大体のことは1回目の記事に書いているが、この1ヶ月間何をやっていたのか少し説明しておこう。 日々の研修でやることといえば、その日にクリアしたミッションのポイントを集計し、スプレッドシートに日報とポイントを書くこと。個人でクリアしていくミッションは100個以上あり、難易度に応じてポイ

          Miranda / 玉…

          2回目のメタラーニング研修を受けました

          Miranda / 玉子豆腐

          CSSで絵を描いてみよう〜さくらんぼ編〜

          先日、CSSの限界が知りたくて調べていたら、とあるサイトにたどり着いた。 これらの作品は全てHTMLとCSSだけで書かれている。しかもHTMLはほぼdiv要素とclassの定義だけなので、実質CSSだけで書かれている。すごい。職人技である。 と、いうことで私も職人を目指すべく、CSSで絵を描いてみた。 用意するもの​・描きたいものの写真(今回はさくらんぼなので美味しそうなやつ) ・CSSで絵を描きたいという気持ち ・根気 今回さくらんぼを選んだ理由、それは描きやすそうだ

          Miranda / 玉…

          CSSで絵を描いてみよう〜さくらんぼ編〜

          Miranda / 玉子豆腐

          水中っぽいアニメーションをCSSとjQueryで作ってみる

          最近なんだか暑いので、気分だけでも涼もうということで水中っぽい、泡が出るアニメーションを作ってみた。 はじめに実は泡が出るアニメーションはすでに多数存在する。ただ自分が表現したいものとは違っていたので、既出のものを参考にしながら作ってみた。 水中を表現しよう水中は絵でもグラデーションで表現することが多い。海藻や魚があれば別だが、個人的には青一色だとのっぺりした印象になり、水中だと認識しにくい。 しかしグラデーションをかけるだけで、不思議なことに水中っぽくなる。青系統の色

          Miranda / 玉…

          水中っぽいアニメーションをCSSとjQueryで作ってみる

          Miranda / 玉子豆腐

          CSSアニメーションを使ってまばたきをさせてみる

          前回のおまけみたいなもの。CSSアニメーションもいろいろ触ってみたかったので、まばたきするアニメーションを作ってみた。 準備するもの元の画像と動かしたいもの。動かしたいものは透過pngにしておく。 元の画像↓ 今回動かしたいのは目の部分なので、目を開けた状態と閉じた状態の透過画像を用意した。 この時、画像サイズを揃えておくと楽に重ねることができる。 CSSアニメーションを使ってみようまずはHTMLに元の画像と目の画像2つをそれぞれ書いておく。開けた状態だけ少し長めに

          Miranda / 玉…

          CSSアニメーションを使ってまばたきをさせてみる

          Miranda / 玉子豆腐

          CSSブレンドモードとSVGで創作っ子に似合う髪色を探してみよう

          先日、研修でsvgを初めて使った。アニメーション、画像自体の色を変えるなど様々な使い方がある。先輩や同期がすごいアニメーションを作っていたこともあり、とても興味を持った。簡単なアニメーションから勉強してみようかとも考えたが、svgのことを調べていると商品の色を動的に変えられる記事を見つけた。キャラクターの創作にも使えるかもしれないと思い、そちらに先に手をつけてみることにした。 イラストを描いている人へ創作活動、特に一次創作をしている人は誰しも思ったことがあるだろう。 「キャ

          Miranda / 玉…

          CSSブレンドモードとSVGで創作っ子に似合う髪色を探してみよう

          Miranda / 玉子豆腐

          1回目のメタラーニング研修を受けました

          本日、株式会社ココスペースの方にお越しいただき、リモートでメタラーニング研修というものを受けた。一応今日から約2ヶ月に渡って行われるらしい。最初という事で頭の整理も兼ねつつ、忘れないうちに感想を書き留めておこうと思う。 そもそもメタラーニングとは何か？これは機械学習特有の用語で、学習経験や結果から学習効率を上げる手法だ。つまりざっくり言うと、学び方を学ぶことといえる。(自分自身もあまり理解できてない部分なので、詳しい説明ができず申し訳ない。) 1.チーム内で自己紹介今回新

          Miranda / 玉…

          1回目のメタラーニング研修を受けました

          Miranda / 玉子豆腐

          入社4日目で心が折れそうになった話

          ※最初に、主観ではありますが入社したところがやばいところではないことと、ブラック企業でもないことだけは明記しておきます。会社の業務とはあまり関係のない話です。 一昨日、社会人になって初めての土曜日を迎えた。雑事はあったが、特にいつもと変わらない土曜日だった。スーパーで食料を買い、ゲームに課金し、イベントを走る。アニメやyoutubeを見ながら絵を描く。お腹が空いたら簡単なものを作って食べる。そこに、母からチャットが飛んできた。 「仕事はどうですか？」 それが始まりだった

          Miranda / 玉…

          入社4日目で心が折れそうになった話

          Miranda / 玉子豆腐