概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Care beyond code: 7 best design practices for frontend developers—Martian Chronicles, Evil Martians’ team blog 原文公開日: 2023/11/28 原著者: Nina Torgunakova（フロントエンドエンジニア）、Travis Turner（技術記事編集者） サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語ブログ: 合同会社イービルマーシャンズ - Qiita 日本語タイトルは内容に即したものにしました。 本記事では原則としてdesignは「デザイン」としています。

こんにちは。デザインチームのスギムラです！ 今年もTechRachoの夏企画の一環でデザインチームを紹介します。 （※今回もほぼ昨年記事と内容変わっていません） ありがたいことに業務が忙しくて今年はとうとう新作バナーが作れませんでした…不甲斐ない。 数年分のバナーのたくわえがあるので年表記を変えるだけで乗り越える方法に手を出しました。 デザインチームの実績紹介 デザインチームの実績は下記サイトに掲載中です。 デザインチームの実績はこちらから パンフレットやロゴデザイン、Webサイト制作など幅広く手掛けておりますのでぜひご覧ください。 こちらに掲載しきれない実績も多数ございますので、 「仕事の相談をしたいからもっと実績を知りたい！」という方はぜひ記事下部のお問い合わせからお気軽にご相談下さい。 デザインチームについて BPS内にあるデザイン案件をメインに取り扱うチームです。 現在のメンバーは

こんにちは、デザインチームのスギムラです。 しばらく見てないうちに好きな海外ドラマのシリーズが軒並みアマプラから配信が終わっていることに気づき、悲しい思いをしました。ネトフリ限定配信も増えてきている昨今、両方とも契約するか悩み続けています。 さて今回は弊社が提供する、ノーコード特化型の受託開発サービスのLPの制作実績を紹介します。 サービス内容については、下記の記事で代表の渡辺が詳しく紹介しておりますので、ぜひあわせてお読みください！ ノーコード受託開発のサービス紹介ページを公開しました ノーコード ( NoCode ) システム受託開発、はじめます BPSのノーコード受託開発とは BPSのノーコード特化型の受託開発は、ノーコードに特化したことで、Webシステム・アプリを従来よりも短いスケジュールで、なおかつ低価格での構築が可能です。 短期間でリリースしたい、低価格でリリースしたいというお

株式会社ザ・リード様 のWebサービス「オンライン自動販売システム ファネシー」のユーザー向け管理画面全般のデザインを担当しました。 ファネシーは、「オンラインビジネスをもっとシンプルに」することを目的とした、セールスファネル構築をオールインワンで行える多機能Webサービスです。 起業家・フリーランスに向け調整されており、用意されたテンプレートを書き換えるだけで簡単にWebサイトが作成が行えるが特徴です。 デザインのポイント シンプルでわかりやすいUIを目指しデザインを行いました。 ブランドカラーのグリーンで爽やかにまとめ、強弱のある配色でわかりやすいUIとなるよう設計しています。 多機能で設定項目など要素が多い為、情報整理や余白の扱い等に気を使い、UIが煩雑にならない様に心がけました。 管理画面という特性上、どうしても文字がメインの画面となるため、標準的な入力要素に加え、必要に応じてより

自社のサービスや商品を紹介するLP（ランディングページ）を作りたいけど、いざWebデザイン制作会社に依頼するとなると一体何から手を付ければいいかわからない・・・なんてことはありませんか？ 他社にWebサイトの制作を依頼するなら、制作の流れと抑えるべきポイントは事前に知っておきたいですよね！ デザインの知識が無くてもLP制作の流れやポイントを把握できれば、Webデザイン制作会社とのやりとりもスムーズに進められます。 この記事ではLP（ランディングページ）を制作する際に特に重要なポイントを、実際の工程に沿って解説します！ この記事の著者について スギムラ：BPSデザインチームのデザイナー LPだけでなくコーポレートサイトやシステム画面デザイン、チラシやパンフレット制作等も行っています。 普段からお客様のWebサイトを制作している視点から、LP制作の流れや必要な情報等を知れた方が不安なくご依頼い

こんにちは。デザインチームのスギムラです。 在宅勤務で家から全然出ないので衣替えのタイミングが一生分からん…て言ってたら一年が過ぎました。 TechRachoの夏企画やアドベントカレンダー企画で毎回バナーが違うのは、お気づきでしょうか！？ 多分そこまで見ている方はいないのでお気づきでない方が大多数だと思います。 こちらのバナーはスギムラが作っているのですが、せっかくなので今まで作ったバナーの紹介をしていきたいと思います。 TechRachoの夏企画やアドベントカレンダー企画とは TechRachoでは「社内で普段記事を書く習慣や機会がない人に、書くきっかけを作る」という主旨で、年に2回記事の執筆者を広く募集する企画を行っています。 12月のアドベントカレンダー企画は数年前から行われていましたが、昨年度から夏のTechRachoフェアが始まり年に2回の企画となりました。 夏のTechRach

こんにちは。デザインチームのスギムラです！ おうち時間が増えたために最近海外のホラー映画も嗜むようになりました。 でも日本製のホラーはなんか怖くて手が出せません。 ということで今回は、今更ですがTechRachoのアイキャッチについてのお話を書きたいと思います。 TechRachoアイキャッチをリニューアルした経緯 TechRachoのブログが一昨年リニューアルした折に、ブログのアイキャッチ画像もリニューアルデザインにあわせてテンプレート化しました。 リニューアル前のアイキャッチには以下のような問題点がありました。 特にルールが無かったのでノンデザイナーが自由に画像をセレクトしていた それまでは特にテンプレートもルールもなく、更にデザインチームがアイキャッチ制作に関わることもありませんでした。 そのためノンデザイナーのTechRacho編集部や記事制作者が記事に合わせて、その都度フリー素材

ニシです。 「Webの技術って海外の方が進んでるらしいよ」という話は耳にするものの、みんなどうやって情報キャッチしてるんだろう？と思ったことはありませんか。私だけでしょうか。 最近、そんな疑問に答えてくれる良いアプリがリリースされたので紹介します。 Vincentとは Vincentは2020年2月5日にリリースされた海外発のiOSアプリです。 デザイン、フロントエンドのニュースを毎日取得できます。 当時のツイート↓ We're excited to announce the first public release of Vincent, your one-stop inbox for design and frontend news. Vincent is now LIVE on @producthunt https://t.co/pHzuJQoQvU — Vincent App (@

こんにちはニシです。久しぶりにリングフィットやったら筋肉痛が痛い。 今日はマージンの話です。 たまーにデザインなしでフロントの実装をしているエンジニアの方から、UIが上手くキマらないという相談が入ります。 大抵の場合、デザイナーが見るとどうして上手くいかないのか、どうやったら上手くいくのか、というのはすぐわかります。 今回は、デザイナーがどういう考え方でデザイン・設計しているのか、を言語化していこうと思います。 あんまり深い話をすると長くなるので、まず私が大事だと思ったマージン（余白）と情報構造の話に絞って書きます。 マージンは情報構造と深い関係があります。これを理解すると、「適当にいい感じで実装」が上手くいくようになるのではないかと思います。 今回はこんな人向けの記事です 初級デザイナー フロントエンドエンジニア UI/UXに興味ある人 ※本記事では余白のことをマージンと表記しております

こんにちは。デザインチームのニシです。 今日はフォントの話です。フォントの話は奥が深くて沼。あんまり長くならない様に焦点を絞って書きます。 今回は前々から気になっていた「Webサイトで使われているフォント」について調べてみました。 自分でデザインするときは大体欧文フォントをWebフォントから1〜2種類選んで、日本語は游ゴシック、みたいに形式化していたので、他サイトのフォントを調べることでデザインの幅を広められたらなと思いました。 結論からいうと、 「欧文フォントは自由に選択されている」 「和文フォントは游ゴシックかNoto Fonts」 という結果でした。 欧文フォントは書体数が少なく軽いため、フォントファイル読み込みでもなんでも自由！和文は書体数が多く重いためOS搭載フォントかWebフォント！というところですね。納得。 Webサイトで使用するフォントについて軽く説明 Webサイトでのフォ

2019.12.13 【webデザイン】そのフォント指定どうして必要なの？ - ゴシック体VS明朝体編 - こんにちは。デザインチームのスギムラです。 タピオカばっかり呑んでましたが最近は仙草ゼリーの方が好きです。 冬のタピオカはホットが良いと聞いたのでホット飲んだら想定よりめちゃくちゃ甘くてもたれました。 暖かいと人の味覚は甘さを強く感じるんですね… アドベントカレンダーなので今年こそはクリスマスっぽいネタをとおもいましたがそんなにクリスマスっぽい面白ネタが思いつかないのですぐに諦めました。 今回はWebデザインをするときのフォントのお話をしようと思います！ 今回の経緯 以前、デザイナーのニシが書いた記事にエンジニアの常川から熱いレスが届きました。 曰く、「なぜ『デザイン上、明朝体を絶対に使いたい時がある』のか一発で理解できるように納得できる記事を見てみたい」とのことでした。 デザイナー

こんにちは。デザイナーのニシです。 最近はリングフィットアドベンチャーで毎日良い汗かいてます。我が家の5歳と1歳もマネするのでとても癒されるゲームです。 先日テレビで観た「関ジャム」の椎名林檎ゲスト回で、ミュージシャンの岩崎太整さんが「ジゴロ進行」について話していたのがとても印象的でした。 ジゴロ進行とは：何も考えなくてもそれだけで名曲になってしまうコード進行のこと コードとは、私は門外漢なためよくわかってないのですが、音楽理論における和音のことだそうです。簡単に言うとドミソとか、レソラとか。 ジゴロ進行を用いた曲として、『Just the Two of Us』、『今夜はブギー・バック』、『丸ノ内サディスティック』、『キラーボール』、などが挙げられていました。 私にとってこの「ジゴロ進行」の話がとても印象深く、デザインにもそういうジゴロ進行みたいな条件があるのではないだろうか、と、考えてみ

こんにちは。5月に産休育休から復職したデザイナーのニシです。 最近、健康と体力作りのために筋トレを始めました。毎日昼休みにコヤマさんと一緒に10分ほど筋トレしてます。皆さんもいかがですか。 今回は、レスポンシブサイトをデザイン・コーディングする際に明朝体の指定は何にするのが一番いいのか、試行錯誤した結果得た最適解を書きます。 最初に：結論 先に結論をいうと、 Google FontsのNoto Serif CJK（源ノ明朝）を使う IE11対応のためGoogle Fontsの設定で「Japanese」を必ず選択する です。Japaneseを選択しなかったというだけでかなり、右往左往してしまいました（後述）。 Google Fontsとしては他にも明朝体の選択肢はありますが、癖のない良い感じの明朝体というとやっぱりNoto Serif CJKかなーと思います。しかしいずれ、さわらび明朝も使っ

こんにちは、デザインチームのスギムラです。全然記事更新してないですねデザインチーム。 しばらくは一人月一更新で頑張っていきたいと思います。 記事書かない間にアベンジャーズ エンドゲームも公開されたし、スパイダーマン ファー・フロム・ホームも公開されちゃったよ！！ シリーズ見てるファン的には面白かったんですけど、どっちも今まで観てきた人以外をすごい勢いで振り落としてたので迂闊に人に勧められないなぁと思いました。 ファー・フロム・ホームではスーツをカスタマイズしているピーターの姿を見て普通に泣きました。 はい、ということで今回は画面デザインのお話しをしてみようと思います。 以前にもニシがそんな記事を書いてました。 今回そんなに関係ないんですけど宣伝だけはしておきます。 Webデザインのための情報整理術: 情報過多編 Webデザインのための情報整理術: 情報過少編 画面デザインとか情報の整理は具

こんにちはデザインチームのスギムラです。キャッチ画像は「なんかヒゲがサンタっぽいな…」という理由で選んだ本記事には無関係なおじいさんの写真です。 アドベントカレンダー、書くのはいいけど記事の内容がなにも思いつかなかったので去年同様レタッチ系のネタになりました。困ったらすぐ写真のネタに頼ってしまう上に1ミリもクリスマス関係ないんですね～まいったまいった。 今回はタイトル通り男性の写真を修整してみるときはこれだけやっておけば良く見えるよ～なハウツー記事です。 あんまり技術的に突っ込んだ話はせず修正してる流れを見てもらえたらな～と。例によって初心者向けではないです。 そしてなぜ男性だけかというと社内の女性の写真が手に入りそうになかったからです。私も顔出したくないし仕方ないよね。写真が手に入ったらいつか女性編をやるかもしれません。 というわけで弊社役員の榊原の写真をご用意しました。ちゃんと許可も取

こんにちは、デザイナーのスギヤマです。 昨年のアドベントカレンダーに引き続き、また動きのあるものを用意してみようと思い、今回は「マイクロインタラクション」をテーマに、「TechRachoにクリスマススキンが実装された！」という設定で、UIの切り替えのマイクロインタラクションを簡単に作って行こうと思います。 今回主に使うのは Adobe XD （以下:XD） Adobe After Effects （以下:Ae） UIデザインの制作にPhotoShopも使っても問題ありません。 Adobe Photoshop （以下:Ps） そもそも、マイクロインタラクションって何？ マイクロインタラクションは、ユーザーに対して以下のものを提供するシステムの振る舞いです。 ユーザーがタスクを達成すること補助する ユーザーに楽しい体験や役に立つフィードバックを与える 具体的には、以下の用なものが上げられます。

こんにちは、デザインチームのスギムラです。 実績紹介第2段！！まだ終わらないです！！！！！続きます！！！ 最近、突然タピオカブームが自分の中で到来して色々とタピオカドリンクを飲み歩きはじめました。まさかタピオカドリンクのためにお店に並ぶ人間に自分がなるとは思いませんでした。ほうじ茶系のドリンクが好きなので茶BARさんのがお気に入りです。 タピオカなら正直なんでもいいのでコンビニで売っていてるものも普通に飲むんですが、まわりからは弾力が無くてコンビニのはあまり好きじゃないと必ず言われます。それがいいんだよコンビニのは。 さてさて、今回ご紹介するのは弊社のインフラサービスのLPです。 サイトについて まずは実物をご覧ください。 BPSのインフラサービス AWSやGCPといったクラウドサーバの導入支援や保守まで、実績豊富なBPSに何でもお任せください！というサービス販促のためのLPです。 クラウ

夏から記事更新が止まっているデザインチームです。これはいけないですね…。 ということで秋口にリリースしたLPや他社サイトなど実績の紹介を少しずつしていきたいと思います。 ところで早くヴェノム観に行きたいです。まだ行ってないんだなぁ。 先日リリースした「漫画翻訳・写植サービスLP」を紹介します！ BPSの漫画翻訳・写植サービス BPSでは開発やデザインだけでなく、漫画翻訳・写植のサービスもしていることはご存知でしょうか。 ご存じないならぜひとも覚えていってください。 詳しい事業内容についてはこちらの記事をご覧ください。 漫画事業の各業務を紹介 もともと、弊社コーポレートサイトの方にも事業紹介ページはあるのですが、 広告などを出すにしては内容や構成が弱い。。（その目的で作ってはいないので） BPSHPの情報をベースにしつつ何を強みとしてどう情報を出すか！という整理から始めました。 現行ページを