Articles
千原 凌也の記事
![リモートワーク・オンライン会議でも、スムーズに制作を進めるために大切なこと[資料編]](http://images.ctfassets.net/5ylkxb4fmvgk/7eqXtIlkrO9QhTpqxnrt9O/0a276ca806d1e8ea9ea37c8a9b995a61/icon-remote-work.png?w=600&fm=webp)
リモートワーク・オンライン会議でも、スムーズに制作を進めるために大切なこと[資料編]
コロナ禍の影響により、リモートワークの導入をおこなっている制作会社も多く、実際に弊社でも導入しています。
![売れるECサイトデザインを作るために。参考にしたいおしゃれな事例の探し方。](http://images.ctfassets.net/5ylkxb4fmvgk/6w1bHg7RW1kRzBo7Qpt6Py/4df48270c82c6651cf294235b690b2ca/icon-ec.png?w=600&fm=webp)
売れるECサイトデザインを作るために。参考にしたいおしゃれな事例の探し方。
売れるECサイトのデザインは、「この形式」という決まりはありません。ECサイトで売り上げを上げるなら、しっかりとしたコンセプトと、コンセプトを決定するまでのリサーチが必要です。
![制作会社の考える、業務効率化ツールのおすすめ。個人でも使いやすいサービスなど。](http://images.ctfassets.net/5ylkxb4fmvgk/5tWdMqARg580GVrqQAViG7/4ae490b5252e83cc299dcd1b279c0a0d/icon-tool.png?w=600&fm=webp)
制作会社の考える、業務効率化ツールのおすすめ。個人でも使いやすいサービスなど。
新型コロナウイルス感染拡大の影響で、リモートワークが主流になり、弊社でも週のほとんどは各自宅で作業をしています。
![ECの構築方法、おすすめのECサービス。](http://images.ctfassets.net/5ylkxb4fmvgk/6w1bHg7RW1kRzBo7Qpt6Py/4df48270c82c6651cf294235b690b2ca/icon-ec.png?w=600&fm=webp)
ECの構築方法、おすすめのECサービス。
ファッションや家電、スーパーの買い物でさえもECサイトを利用することが当たり前になりました。加えて新型コロナウイルスの影響もあり、弊社にも「どんなプラットフォームを利用したら良いか」「どれくらいコストがかかるのか」などECに関するさまざまなご相談を頂きます。
![8月に#designで話題になった記事、ウェブサイト](http://images.ctfassets.net/5ylkxb4fmvgk/4XqE572Yv3XDZ5ZLLxrBf/96d32e9180b7abd3b1d92e6302391681/ishan-seefromthesky-qE1Y8GQKhEk-unsplash.jpg?w=600&fm=webp)
8月に#designで話題になった記事、ウェブサイト
GiFTのSlackにはデザインのことをざっくり話す#designチャンネルがあります。主にはデザイナーがたれ流しにしているチャンネルですが、チームみんなに見てほしいと思うものを共有するようにしています。その内容を紹介します。
![“上手にたたかれる”デザインを作るための5つのポイント](http://images.ctfassets.net/5ylkxb4fmvgk/4EswFVNDl0hG5GBRRcmT4P/a1c5c6816a9d2f7b1c5ca1e99c83df6d/alex-jones-Tq4YjCa2BSc-unsplash.jpg?w=600&fm=webp)
“上手にたたかれる”デザインを作るための5つのポイント
今、必要とされているデザインスキルは「上手に使われるたたき台を作ること」なのではないかと思っています。
![心の余裕をつくる](http://images.ctfassets.net/5ylkxb4fmvgk/5eshuYHu2ZMXBxfsbTNqjk/137c14911fde1bb256a1af6f40e9b555/design.png?w=600&fm=webp)
心の余裕をつくる
デザインを確認してもらうとき、どのようにコミュニケーションを行えばより良いものを作ることができるのか考えてみます。
![情報設計とデザインの間](http://images.ctfassets.net/5ylkxb4fmvgk/qU3bRdDxUw2aJ5V858whh/587c5092de7383ae6a693cf531843820/design.png?w=600&fm=webp)
情報設計とデザインの間
デザインする上で必要な情報にはどのようなものがあるのか考えてみます。
![アートとデザインの違いと名前をつけることの意味](http://images.ctfassets.net/5ylkxb4fmvgk/3N2zJe3pMQcNzdYxDpAJzc/49fc7740c31b1cb72afa7355b3f17025/design.png?w=600&fm=webp)
アートとデザインの違いと名前をつけることの意味
アートとデザインの違いを聞かれたので、自分の思う“言葉”の違いと、名前をつけることの意味を考えます。
![GiFTの制作ワークフロー [2020 ver.]](http://images.ctfassets.net/5ylkxb4fmvgk/1ZSIcY06THAjzmOQdkxzga/137783836b3993b798e9f32467454f47/communicate.png?w=600&fm=webp)
GiFTの制作ワークフロー [2020 ver.]
制作する上でのさまざまなコミュニケーションの方法を共有しつつ、どうしていきたいか、どう変えていくか考えていきます。
![デザイナーが思うLP制作でSTUDIOを使う5つのメリット](http://images.ctfassets.net/5ylkxb4fmvgk/1xXRhPnRiByJmH1LkwUccm/e31f4b12f566e10d93c20d217fc26260/studio-design-tips.png?w=600&fm=webp)
デザイナーが思うLP制作でSTUDIOを使う5つのメリット
HTMLやCSS, JSでマークアップするのではなく、ウェブサービス上のGUIでウェブサイトをつくることができる"STUDIO"というサービスを触ってみたので感想をまとめました。マークアップまで担当するデザイナー、という目線で面白かった部分にフォーカスしています。
![デザイナーとして忘れちゃいけないポイント](http://images.ctfassets.net/5ylkxb4fmvgk/5VilEJvRkQL7mSh22UbVtx/8664d5f1fe3e3c17a7c75309a33ba678/inner-lid-of-silver-watch.png?w=600&fm=webp)
デザイナーとして忘れちゃいけないポイント
僕は名刺にはデザイナーと書いてあります。「には」っていうと含みがありますが、デザイン作業ではないことも同時にいろいろ行うという意味です。その中で、デザインと向かい合うときに忘れないようにしたいことをメモしておきます。
![見ているものを知るための知識](http://images.ctfassets.net/5ylkxb4fmvgk/1W4seNwAGkiuOMl7Ui0qhW/320202d909f51c14151ee25fb5cf006c/what-are-you-looking-at.png?w=600&fm=webp)
見ているものを知るための知識
“デザイン”を見る時、なにを見ているかということについて少し考えました。自分が見ているものがどういうものなのか、それを知るのは面白いな、みたいな話です。
![scopedを前提とした小~中規模CSS設計を考える](http://images.ctfassets.net/5ylkxb4fmvgk/72cZLmqYZ3aKYyOj9K5SkA/4e7aa7f6cf21802bdb837c2b963c67d9/scoped-css-design.png?w=600&fm=webp)
scopedを前提とした小~中規模CSS設計を考える
案件ではNuxtを利用することが多く、大仰なCSS設計は逆に作業効率を悪化させる。コンポーネントごとに閉じる世界なので、命名規則をがちがちに決めて冗長なクラス名を付けたくない。ということで今自分が思っているCSSの設計粒度を、メンバーとすり合わせる意味でもまとめておく。
![デザインデータと仲良くなる 2](http://images.ctfassets.net/5ylkxb4fmvgk/3Pwzba7oDXD8XI3IfMcNkD/f3ad3ee58d2ce4647e33b55746a3796f/sawyer-bengtson-tnv84LOjes4-unsplash.jpg?w=600&fm=webp)
デザインデータと仲良くなる 2
エンジニアとデザイナーの間で起こるデザインカンプの解釈の違いについて、どのようにリレーションしたら良いか、その指針を考えます。1回目に続いて、今回はスナップショットであるデザインデータをどのようにレスポンシブなものにするか、という観点で話します。
![デザインデータと仲良くなる](http://images.ctfassets.net/5ylkxb4fmvgk/38I6sZipQcrl2BtmaysIkx/b55aa0f6d6fa87f6ab789119e8a88c69/raul-varzar-1l2waV8glIQ-unsplash.jpg?w=600&fm=webp)
デザインデータと仲良くなる
ウェブサイトやサービスを作るときには、仕様をもとにデザインカンプを作り、それを参考にマークアップするのが一般的な流れだと思います。 その時に問題になるのは、エンジニアとデザイナーの間で起こるデザインカンプの解釈の違い。どのようにリレーションしたら良いか、その指針を考えます。
![心に残るウェブコンテンツ 2019.08](http://images.ctfassets.net/5ylkxb4fmvgk/2XPU7mMg8O2f7etRyTe8U8/605c6b02c938b7115e031609840cdd72/004.png?w=600&fm=webp)
心に残るウェブコンテンツ 2019.08
さっさと作ってさっさとローンチ。細かいところは走りながら修正してPDCA回して、というような今日で、見た目をすごく作り込んでいるな、と素直に驚けるクオリティのウェブコンテンツってなかなか出会わないので、見つけたものを少しずつご紹介。
![面白いUIをつくる時代の終わり、という昔話](http://images.ctfassets.net/5ylkxb4fmvgk/3dXUMWryp1eB2w5UfPseGT/533b4ea4e1cfb929802f295c17d4e46c/003.png?w=600&fm=webp)
面白いUIをつくる時代の終わり、という昔話
先日、デザイナーの友人に「ECサイトを作っている。テンプレートを組み合わせるだけでできるし、そうしてくれと言われる。ウェブデザインのデザイナーとしての将来性ってあるのだろうか?」と聞かれた。
![“誰かが決めた仕様の資料化”から脱するための要件定義](http://images.ctfassets.net/5ylkxb4fmvgk/5hpk06N9dvsOpjECbl8bjU/38f3d141cdae60ecea48848004a95a16/002_thumbnail.png?w=600&fm=webp)
“誰かが決めた仕様の資料化”から脱するための要件定義
「あれ…?これ誰が欲しくて入ってる機能なんだっけ?」みたいなことを、どうしたら避けられるかな、というメモ。
![ロゴのリファイン](http://images.ctfassets.net/5ylkxb4fmvgk/1jkgUXOuw6NiIqwISxUbpY/340e13ff7312ec08daecde81076e7392/001-min.png?w=600&fm=webp)
ロゴのリファイン
会社のシンボルを少しだけ手をいれさせてもらうことにしました。デザインそのものは好きなので、壊さないように収まり良くする、というのが目標です。過程を簡単に紹介しつつ、社名の由来についてご紹介します。