フロントエンドエンジニアとデザイナーさんは日々協力してプロダクトを作っていく関係にあります。デザイナーさんが作ってくれたものをエンジニアが素早く実現できるよう、いくつかエンジニアから意識してほしいことをまとめました。 なんでこんな話になったのか（前置きなので次の章まで飛ばしてOKです） デザイナーさんから「この画面をこんな風に作ってください」とXDやSketch、PSDなどいろいろな形で渡されることがあると思います。 僕の個人的な意見・経験ですが、いざ実装するぞとなったときに 「あれ…ここってどうしたらいいんだろう？」 と迷って作業のスピードが落ちてしまうことがとてもストレスに感じていました。できればノンストップでいきたいなあと思うわけです。 手が止まるたび、デザイナーさんに「ここってどうしたらいいですか？」と質問するのが何か新しい画面を作るときに必ず発生していました。 「（いつも聞いてる
プロダクトマネジメントと事業開発に関する私的な振り返り - 下町柚子黄昏記 by @yuzutas0
TL;DR 企画力が…欲しい… pic.twitter.com/hJfr0qNv7T— ゆずたそ (@yuzutas0) 2020年11月19日 試行錯誤の瓦礫の記録です。 はじめに もくじ TL;DR はじめに もくじ 以前書いた記事 前提・免責 アイデア 1日1案（やってよかったこと） 1stスクリーニング（やってよかったこと） コミュニケーション チームへのリスペクト（やってよかったこと） 話す <<< 聞く（改善余地あり） 即決する（やってよかったこと） 自分で各論まで見る（やってよかったこと） 発散→収束でディスカッション（改善余地あり） イラストで話す（改善余地あり） 日次ミーティング（やってよかったこと） 議事録を書く（改善余地あり） 得た情報を共有する（改善余地あり） 想定納期を示す（改善余地あり） カレンダー招待＆日程確約コメントを転記（改善余地あり） プロセス管理 仮説
約1年前、BtoB企業における顧客獲得型サイトの勝ちパターンをまとめた『BtoBサイト・チェックリスト』を、ベイジ、才流さん、WACULさんの3社連名で発表し、大きな反響をいただきました。 このチェックリストはブログで公開しただけではなく、私たちのウェブ制作の現場でもフル活用されています。この1年間に手掛けた多くのBtoBサイトが、このチェックリストを満たすように設計され、多くのBtoBサイトでコンバージョン数/率やフォーム誘導数/率の向上など、ポジティブな変化が生まれました。 このような活動の中から、『BtoBサイト・チェックリスト』の内容を満たした『BtoBサイト・ワイヤーフレーム』なるものが誕生しました。これを今回、皆さんにご提供します。リード情報なども一切取らず、そのまま丸ごとお渡しします。 BtoBサイト標準ワイヤーフレームXD版（770KB） BtoBサイト標準ワイヤーフレーム
この記事で紹介した手順をライブラリ化して公開しました🎉 こちらの別記事 で使い方など詳しくご紹介していますので、ぜひご参照ください！ はじめに 言い切りタイトルすみません 僕を含む一定数の人にとって現時点でのベストプラクティスとなりうる手法という意味で紹介しています 極めてシビアな帳票出力の世界にいる人から見ると使い物にならない内容かもしれないと思います 帳票印刷の世界では SVF というサービスが有名らしいです。が、こういった外部サービスは使わずに自力で実装するというのがこの記事の前提です 動的に明細行の数が増減する連票はこの記事の解説では考慮していませんが、追加で実装するのはそれほど難しくないということは読んでいただければ分かるかなと思います 結論から 僕が考える現時点でのWebアプリでの帳票印刷のベストプラクティスは、 Adobe XD や Figma で帳票のレイアウトをデザイン
締め切りが厳しいプロジェクトで、プロジェクト初期にまずやっておきたいこと - $shibayu36->blog;
これまで僕は締切がかなり厳しいプロジェクトを数回経験してきた。その経験から、締切が厳しいという特性を持ったプロジェクトの初期にまずこれだけはやったほうが良いということがいくつか見つかったので、今回はそれらを紹介していこうと思う。 前提となるプロジェクト 今回紹介する方法は、次のような特性を持ったプロジェクトを前提とする。 細かい仕様は決まっていないが、作るものの要件はある程度明確である アジャイルの定義におけるスコープ・コスト・品質・スケジュールの中で、スケジュールを特に優先したい(スケジュールを変えられないなど) 数ヶ月以上のプロジェクトである 短いスパンでリリースしてユーザーの様子を見てその後のプロダクトバックログの優先度を変えるような性質のプロジェクトでは、別のやり方を取る必要があると思う。そこは注意してほしい。 プロジェクト初期にやっておきたいことは何か 上記のようなプロジェクトの
シェアウェア（という表現はおいておいてのやつ。https://anond.hatelabo.jp/20230124045812）の記事が面白かったので、自分の得意分野の領域でいろいろ紹介します。 基本的に、SaaSのサービスは便利だけど、あれもこれもと契約していったらサブスク破産するので、 ものによってはセルフホストした方がいいと思ってる派。 Dropbox/GoogleDrive/box代替 NextCloudもともとownCloudっていうDropbox代替があったんだけど、そこから分派して今も機能開発が続いている。 興味深いのはLAMP構成なので、VPSや自宅サーバーじゃなくても、レンサバで動くのがいいよね。 データ保存領域はオブジェクトストレージ（S3互換）も利用できるので、例えばWasabiなんかと契約してお安く済ませてしまうのも全然アリかと。 Trello代替 Wekan最近は
私は ある出来事 をきっかけにAdobe製品をやめて他社の製品でWebデザインをしようと考えていました。 最初に考えていたのがPhotoshopの代わりにAffinity Photo、Illustratorの代わりにAffinity Designer、そしてAdobe XDの代わりにSketchまたはFigmaのようなプロトタイピングツールを使用しようと考えていました。 最初はこうしようと思っていた しかし、さまざまな可能性を試した結果、今までPhotoshopとIllustratorとAdobe XDの3つのアプリでおこなっていたことをたった1つのアプリで完結させることができ、しかもあらゆる作業をAdobe XD並みの速度でできる方法があるという事に気づきました。 たった1つのアプリで完結させることができるという事に気づいた ここ最近はたった1つのアプリでWebデザインを完結させるワーク
米Adobeアドビ Systemsシステムズが主催の世界最大のクリエイティビティ・カンファレンス「Adobe MAX 2017」（ネバダ州ラスベガス）。二日目の10月19日は「スニークス」と題してAdobeの研究中の技術が発表されました。スニークスはAdobe MAXで最大の盛り上がりをみせる恒例の人気イベントです。 ここで発表されたものは現時点では製品に搭載されていないものの将来的に製品に組み込まれるかもしれない技術。過去の例を挙げると、Photoshopのディフォグ（霧を増減させる）機能やマッチフォント機能、最新のPremiere Proに搭載されたイマーシブ空間内での編集機能もかつてスニークスで発表された技術です。本記事では発表された11のテクノロジーを、現地のイベントに参加したスタッフ（池田）がレポートします。 今年は人工知能Adobe Senseiをフル活用した次世代技術のオンパ
この記事では、Webデザインやグラフィックデザインの制作スピードを短縮し、生産性をアップする、便利な最新オンラインツールをまとめてご紹介します。 「もっと早く知りたかった」と思わせる、面倒な作業をサクサクこなす時短ツールが勢揃いです。カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. デザインコレクション 3. イラスト系ライブラリ 4. 配色ツール 5. プロトタイプツール 6. コラボ、リモートワークツール 7. 面白、クリエイティブツール Web制作の常識が変わる、便利な最新オンラインツールまとめ Web制作便利ツール The Hero Generator ウェブサイトの魅力的なヒーローイメージを作成できるオンラインツール。グラデーションオーバーレイやボタンスタイル、見出しタイトルの余白など細かい部分も手
はじめに 個人開発もエンジニア自体の歴も浅いSEです。 就業先がJavaをメインで使う企業なのですが、個人的にフロントエンドまわりが好きです。 元々、興味本位でデザインの本だったりUXに関する本とかを読んでいたりするのですが、 その結論の際にたどり着いたのが、 「理論とか決まってるなら、それをよしなにやってくれるor参考にできるツールとかサイト探せばよくね」 という結論になりました。なんと怠惰な思考でしょうか。 そんなわけで、こちらではデザインに限らず、色々開発に便利なツールを紹介させていただきます。 （有名なのが多いかもしれませんが、ご容赦ください、結局有名なものに行き着くのです） レイアウト関係 1. Awwwards おしゃれなwebサイトが集まっているサイトです。 ここまで個人開発でお洒落にできたらいいなと思いますが、自分はアニメーションを考えるときや、 作りたいフロント側のデザイ
こんにちは、Spinners の元山 (@kudakurage) です。 最近はresize.fmという緩めのデザイン系ポッドキャストを @dex1t と始めて、オーディオ系のデバイスや仕組みについて勉強する毎日です。今のポッドキャストの収録環境についても近々書き残しておこうと思っています。 2021年1月に日本で話題になった音声SNS「Clubhouse」についてresize.fmでも取り上げて話したのですが、その中でも話しているスーパー楕円というものについて今回は詳しく書いていこうと思います。 INDEXピート・ハインのスーパー楕円スーパー楕円とデザイン建築や家具のデザインデジタルプロダクトのデザインスーパー楕円を利用した印鑑スーパー楕円の描き方数式を使った描き方（Adobe Illustrator）簡易的な描き方（Vector Draw Tool）ピート・ハインのスーパー楕円 Sou
ウェブデザイナーやグラフィックデザイナーのデザイン制作をスピードアップさせる、便利な最新オンラインツールをご紹介します。 ゼロから作ると時間のかかってしまいそうなことも、これらのツールを使うことで大幅に制作時間を短縮できるツールが揃います。今後のデザイン制作のワークフローに取り入れてみてはいかがでしょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. モックアップツール 2. デザインツール 3. デザインからコードへの変換ツール 4. プロトタイプツール 5. サウンドツール 6. アイコン素材パック 7. コラボレーション、共同作業ツール 8. 面白ツール 9. フォント、書体ツール ウェブデザイン制作を爆速に！便利な最新オンラインツールまとめ モックアップツール Design Camera アニメーション付きの３Dモックアップを数秒で作
こんにちわ！最近はフロント開発も担当させていただいてます、Yamamotoです。 今回はエンジニアがデザインを学ぶべく、100のWebサイトのデザイントレースをして、学んだことをまとめてみました。 エンジニアまたは未経験だけど、Webデザインにも興味があるという方の、何かのきっかけになれば幸いです。 目次 なぜ Webデザインを学ぼうと思ったのか デザイントレースについて 100トレースして学んだこと なぜWebデザインを学ぼうと思ったのか ざっくりですが、実務を行いながら以下のように思うことがありました。 細部のデザイン指示がなく、開発の手が止まってしまう どう実装するか目線の発想・提案しか浮かばない 綺麗なコードだけではなく、視野を広げてより良いものを作りたい などなど... デザイナーとエンジニアの業務は差別化されてはいますが、互いに近接し交わる部分も多くあります。そんな中で、業務効
デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上（2019年12月現在）ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら
stand.fmで出している音声の文字起こしバージョンです。口語になっていて読みづらい点はご了承ください。 はじめまして、有山と申します。 ツイッターでプログラミングスクールについて言及した件についてお話ししようと思います。 そもそも経緯としてはプログラマー、エンジニアを採用したいわけではなく、運営しているエロサイトのアシスタントが欲しいと思って、この一週間で20人くらいオンラインで面接をしました。 募集したのはあくまでサイト運営のアシスタントなんですが、プログラムかじっててコーディングとかできる人にはお願いできる仕事の幅が広がるのでそういう人は歓迎です、という感じで募集をしていました。 するといわゆるプログラミングスクールを卒業してフリーランスしてます、っていう人から3人くらい応募がきました。 そこで経歴、職歴、あとはポートフォリオあれば送ってください、と言ったところ、3人ともポートフォ
ベイジで社内のワークフローを整理しだしたのは確か2014年頃です。その頃はまだ4～5人しか社員がいない状態で、タスクの粒度も粗く、いくつかのタスクは各人の能力に委ねたものでした。しかし10人を超えて関わる人が増えたあたりから、仕事の進め方も徐々に変わり、ワークフローの綻びも色々と出始めてきました。そこで今年の春に、全社員参加のもと、これまでの進め方の問題点を話し合ったうえで、ワークフローの大幅な刷新を行いました。本エントリーはそのご紹介です。 刷新にあたって、受注から納品までをサブタスクを含めて約140に分解しました。また、各タスクで用いられるドキュメントもできるだけフォーマット化し、効率よくドキュメントワークができるようにしました。 合わせて、タスク毎の職能の再定義を行いました。プロデューサー、ディレクターといった業務範囲が曖昧な職能は、より厳密な職能の定義を試みました。例えばディレクタ
ウェブ制作や開発の仕事で文章を扱う機会は多いはず。書き手は不自然に思っていない文章でも、読み手は違和感をもっていることがあります。文章校正テクニックを覚えるだけでおかしな表現は少なくなり、読みやすい文章を書けるようになります。 本記事では、ICS MEDIAで実践している文章校正の一例を紹介します。 レベル1、基本的な校正ルールを使う いろんな場面で使える基本的な文章校正テクニックから紹介します。 テクノロジー系の名詞は正しく記載しているか テクノロジー系の名詞を間違って使うと、「本当に技術に詳しいの？」と読者からの信頼度が下がります。名詞は大文字小文字、スペース有無含めて正確に記述しましょう。 Github → GitHub（Hは大文字） Javascript → JavaScript（Sは大文字） After Effect → After Effects（複数形の「s」を忘れてはいけな
商用でも無料で利用できる1,000種類のアイコンが3つのスタイル、そしてPhotoshoop用・Adobe XD用・Sketch用・Figma用・inVision用、そしてSVGまで完備されたMaterial Icons Libraryを紹介します。 一度にすべてのアイテムがダウンロードできるので、備えておくと便利だと思います。 Material Icons Library ラインセスはApache License Version 2.0で、個人でも商用でも無料で利用できます。 アイコンはMaterial Designを踏襲しており、全部で1,000種類のアイテムが揃っています。スタイルは角丸・アウトライン、ツートーンの3種類。合計すると、3,000種類以上になります。 アイコンの特徴 フォーマットは、Photoshop, Adobe XD, Sketch, Figma, inVision
ウェブ制作や開発の仕事で文章を扱う機会は多いはず。書き手は不自然に思っていない文章でも、読み手は違和感をもっていることがあります。文章校正テクニックを覚えるだけでおかしな表現は少なくなり、読みやすい文章を書けるようになります。 本記事では、ICS MEDIAで実践している文章校正の一例を紹介します。 レベル1、基本的な校正ルールを使う いろんな場面で使える基本的な文章校正テクニックから紹介します。 テクノロジー系の名詞は正しく記載しているか テクノロジー系の名詞を間違って使うと、「本当に技術に詳しいの？」と読者からの信頼度が下がります。名詞は大文字小文字、スペース有無含めて正確に記述しましょう。 Github → GitHub（Hは大文字） Javascript → JavaScript（Sは大文字） After Effect → After Effects（複数形の「s」を忘れてはいけな
Webデザイン作成に必須のツール＆効率化できるサイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
デザインを行う上では、ツールを使うのが必須です。有名なものだとPhotoshopやIllustratorがありますが、「まずは無料で気軽にWebデザインをしてみたい」という人もいますよね。 そこで今回は、Webデザインに使える無料のツールやWebデザインを効率化できるサイトをまとめて紹介します。 今回紹介する無料のWebデザインツール・ソフト ワイヤーフレーム・モックアップ・プロトタイプ作成ツール グラフィックデザイン作成ツール（写真加工・イラスト作成） テキストエディタ（HTML・CSSのコーディング） 配色選びに使える無料オンラインサービス Webサイトが制作できるオンラインサービス （編集部注：この記事は2013年08月29日に公開された記事を再編集したものです。） ワイヤーフレーム・モックアップ・プロトタイプ作成ツール ※ワイヤーフレーム・モックアップ・プロトタイプとは？ ワイヤー
文章の校正チェックを自動で行うVisual Studio Codeの拡張機能「テキスト校正くん」を弊社からリリースしました。無料で利用できます。 テキスト校正くん – Visual Studio Marketplace 短い文章であれば目視でもチェックできますが、長文になるとチェックに時間がかかり見落としも多くなってしまいます。また、いくら内容のいい文章を書いても誤字や脱字が多く体裁が整っていないと、印象が悪く読みづらい文章になってしまいます。 そんなとき、「テキスト校正くん」を利用することで、文章チェックの手間を軽減でき、文章の品質を高めることができます。 ▲VS Codeの拡張機能「テキスト校正くん」 「テキスト校正くん」でできること この拡張機能は、VS CodeでテキストファイルやMarkdownファイル等の日本語の文章をチェックします。編集時に自動で校正のチェックを行い、エディタ
Web・アプリ開発のエンジニアが知っておきたい、デザインツール「Figma」の基本 - JMDC TECH BLOG
JMDCでアプリのデザインを5月から担当しているはんざわです。 Webやアプリのフロント開発者のみなさんはデザインツール Figmaをご存知でしょうか？ JMDCではこれまでAdobe XDをメインで使用していました、今年からFigmaに乗り換えました。 乗り換えに伴い、デザイナー以外のメンバーにもFigmaを操作できるようになるべく、勉強会を開催しました。 勉強会はオンラインで開催。Figmaで資料を作成、参加者に資料を開きながらGoogle Meetを繋げて詳細を説明していきました。 勉強会で使用した資料はFigmaのCommunityにアップしているのでぜひ見てみてくださいね。 www.figma.com エンジニアがFigmaを触れるようになることのメリット 基本知識と基本操作 実装するために使う デザインシステムについて そのほか便利な機能 さいごに エンジニアがFigmaを触れ
Top 25 Free Icon Resources for Web Designers | Speckyboy - Wordpress & Design
Icons play a critical role in UI design, offering a simple yet effective way of conveying information and direction while enhancing user experience. Luckily, most icon sets are free for designers to use in many different types of projects, including web and mobile app design. It’s just a matter of finding the icon set that best suits the requirements of your project. That’s where this collection c
文章の校正チェックを自動で行うVisual Studio Codeの拡張機能「テキスト校正くん」を弊社からリリースしました。無料で利用できます。 テキスト校正くん – Visual Studio Marketplace 短い文章であれば目視でもチェックできますが、長文になるとチェックに時間がかかり見落としも多くなってしまいます。また、いくら内容のいい文章を書いても誤字や脱字が多く体裁が整っていないと、印象が悪く読みづらい文章になってしまいます。 そんなとき、「テキスト校正くん」を利用することで、文章チェックの手間を軽減でき、文章の品質を高めることができます。 ▲VS Codeの拡張機能「テキスト校正くん」 「テキスト校正くん」でできること この拡張機能は、VS CodeでテキストファイルやMarkdownファイル等の日本語の文章をチェックします。編集時に自動で校正のチェックを行い、エディタ
社内のSlack文化に密かに感動している件について #メルカリな日々 2018/4/10 | mercan (メルカン)
こんにちは！ 広報の石川です。入社してあっという間に3週間が経ちました。 新入社員としての新鮮な気持ちが残っているうちに、今回は「社内の圧倒的なSlack文化に密かに感動している件について」書こうと思います。 すでにSlack民度が高い人にとっては何を今さら…と思うような内容かもしれませんが、そうでない人にとってはこんなに新鮮に感じるものなんですよ！ということが伝われば幸いです。 ほぼ全てのコミュニケーションがSlackのオープンチャンネルで行われている メルカリでは、ほとんどのコミュニケーションはSlackのオープンチャンネルでやり取りされ、極力DMを使わないというのが基本。社員同士でメールはまず使いません。 ゆえに、メルカリでは「情報は自分で取りに行くもの」というスタンスが求められます。ほとんどの情報は得ようと思えば得られる状態（もちろん個人情報やセンシティブな情報は別です）になってい
最高のデザインツール「Drama」が登場！SketchやXDより良いかも。 | Web Design Trends
Dramaとは Dramaは、インタラクティブなプロトタイプやアニメーションが作成可能なUIデザインツールです。 公式サイトでは、Dramaによってできることとして下記の3つが挙げられています。 インタラクティブなプロトタイプやアニメーションが作れるUIデザインツールといえば、Framer XやInVision Studioなどが思いつきますが、使いやすさや操作性、機能の豊富さを比べるとDramaは頭1つ抜け出しているような印象です。 また、SketchやAdobe XDなどと比べるとUIデザインツールとしての機能に大きな遜色は無く、むしろ動作の滑らかさではSketchよりも勝っているのではないでしょうか。 Dramaを一言で述べると、「これまでのデザインツールのいいとこ取りをしたツール」であると言えるかもしれません。 現在はまだ正式リリースはされていませんが、公式サイトからベータ版をダウ
営業、受注、制作、納品、運用と、ウェブ制作の活動は長期に渡り、そのタスクの種類と量は膨大です。だからこそ、基本的なプロセスや使用するドキュメントなどを明確に定義しておかないと、サービスの品質が担当者により大きく変わることになります。 ベイジは社員がまだ5名の頃、各人に委ねた進め方によって以下のようなトラブルが頻発していました。 ミスが発生しても「次から気をつける」と精神論で終わらせてしまう 担当するディレクターやクリエイターによってタスクの抜け漏れが起きる 担当者それぞれが属人的な進め方をしてて品質が安定しない 役割が不明瞭なグレーゾーンのタスクが放置されてしまう 創造的な仕事の時間が、ルーチンや計画にないタスクに奪われてしまう 新しい社員が入る度に同じことを教えないといけない これら問題を解決するため、2014年頃からワークフローを整備するようになりました。ちなみに私が入社したのはこれ以
半年ほどかけてWebサービスのプロトタイプを公開するところにこぎつけたのでその記録をしておこうと思います。 作ったもの 一言で言うと「Webブラウザで閲覧したページの履歴を共有するSNS」です。 History（履歴）を流す（stream）ということでHistreamと名付けました。 Chrome拡張をインストールして、ウィンドウを選択し、オンにするとそのウィンドウで見たページ履歴を自動でアップロードします。 そしてWebサービスでアップロードされた履歴を整理された状態で確認したり、友達の履歴を読めたりします。 Chrome拡張: Histream-Extension - Chrome Web Store Webサービス: https://histream.io 作ろうと思ったきっかけ 今から一年前、大学２年の冬にワンタップダイエットというアプリを作っていました。プログラミングするのはほと
この記事では、Webデザインやグラフィックデザインの制作が捗る、便利な最新オンラインツールをまとめています。 これらのツールやサービスを利用すれば、デザイン制作で面倒な作業も手軽に、短時間で行うことができ、より効果的にプロジェクトを進めることができます。制作ワークフローに取り入れてみてはいかがでしょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. デザインツール 2. モックアップツール 3. デザインからコードへの変換ツール 4. プロトタイプツール 5. アイコン素材パック 6. コラボレーション、共同作業ツール 7. 面白ツール 8. デザインコレクション ウェブデザイン制作を爆速に！便利な最新オンラインツールまとめ デザインツール SVG Colorizer 用意されたアイコンやキャラクターなどのSVG素材の配色をカスタマイズできる
この記事では、日常行っているWebデザインやグラフィックデザインの制作が格段スピードアップする、便利な最新オンラインツールをまとめてご紹介しています。 カテゴリ分けされたこれらのツールやサービスを利用することで、面倒な作業を自動化し、生産性をアップすることができるでしょう。一度使いはじめると「これなしじゃ考えられない。」、そんな便利ツールが揃います。 コンテンツ目次 1. デザインコレクション 2. イラスト系ライブラリ 3. モックアップツール 4. デザインからコードへの変換ツール 5. プロトタイプツール 6. 生産性アップツール ウェブ制作がすご楽！便利な最新オンラインツールまとめ デザインコレクション SVG Arista このツールはCSSコードを使って、アップロードしたSVGファイルのstrokeとfillプロパティのアニメーションを作成するAnimistaのスピンオフ・プロ
デザイナーがWebサイトのUIを実装する際にデベロッパーに渡すデザイン仕様書・指示書の作り方を紹介します。 仕様書を作成する基本ツール、指示に適したフォントやカラー、グリッドや要素間の距離を自動的に計算するツールをはじめ、レイアウトや各UIコンポーネントのデザイン仕様の記述例まで、デザインを仕様化する解説記事です。 ブレイクポイントの説明、スティッキー要素の仕様説明、相対サイズの要素の説明方法、ボタンの文字数の説明、アニメーションする要素の説明方法など、デベロッパーに分かりやすく、デザイナー自身も見直せるデザイン仕様書を作成します。 The Art of Design Spec'ing by Mahdi Farra 🍉 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 デザイン仕様書とは デザイン仕様書に使用するツール デザイン
調べたところ良いまとめ記事が見つかりませんでしたので、よく聞くサービスを中心にフリラボでまとめました。もし、他にもこんな良いサービスあるよと要望があればTwitter又ははてぶコメントで教えてください！ （※必ず記載するとは限りません） カッシー フリーランス・クリエイター支援を2012年から始めましたが、この10年でかなりサービスは充実した印象です。実際に僕の身の回りで使われているサービスから気になるサービスまで一気にまとめました。ぜひご覧ください〜！ 注意）仕事紹介エージェント系は広告費の影響が大きいのと、実際どれだけ案件があるのか利用してみないと分からないことから、品質を担保できないためこの記事では主に紹介はしません。 【この記事を書いた人】 フリーランス・クリエイターの駆け込み寺 株式会社クリエイティブユニバース 樫本祐輝（カッシー@strive） 1985年生まれ 岡山出身大阪在
ウェブデザインにおけるline-heightについて
ウェブデザインにおけるline-heightってけっこう曲者で、CSSを理解してデザインしないと「空き」の設計が破綻したりコーディングで苦労することになります。FigmaやAdobe XD、Affinity Designerなどのグラフィックアプリでline heightの扱いが異なるので、使うツールの挙動を理解するのも大切です。 ということで、今回はCSSのline-heightについてまとめてみます。 実は調べれば調べるほど奥が深いCSSのline-heightの世界ですが、まずは基礎からまとめていこうと思います。 目次 以下はページ内のセクションへのリンクです。 CSSのline-heightでは文字の上下にスペースができる ウェブで使われるハーフ・レディングとは 印刷とウェブにおけるレディングの違い デザインツールでのline heightの扱いの違い 上下のハーフ・レディングを帳
2021年現在、ベイジの柱の事業はウェブ制作事業とウェブアプリデザイン事業です。ウェブ制作事業は会社設立の2010年からの主力事業で、サービス品質の平準化を目的に2014年頃からワークフローの整備を進めてきました。 一方ウェブアプリデザイン事業については、事業拡大したのがここ数年で、まだワークフローが整備されておらず、各人の裁量に委ねた進め方になっていました。そこで今後の事業拡大とメンバー増員を想定し作成したのが、業務システムやSaaSのUIデザインに特化した「ベイジの業務システムUIデザインワークフロー2021年版」です。 基本的な進め方は国際規格（ISO 9241-210※）の人間中心設計プロセスに基づいて組み立てていますが、細かいタスクの順序や内容は、今までベイジで培ってきたノウハウをふんだんに盛り込み、組み換えています。 また今回ワークフローを整備するうえでは、クライアントごとの開
私はWeb制作会社を経営しており、2023年現在で36歳になります。 28歳の時にWebデザイナーに転職してWeb業界でのキャリアをスタートさせ、32歳で独立しました。 この記事では、私が28歳の時に未経験から独学でWebデザイナーに転職した方法を紹介しています。 効率的な勉強方法や習得すべきスキル、転職活動のコツなど、Webデザイナーを目指している人におすすめの内容になっています。 また、今はWebデザイナーを採用する立場になっているので、「こんな人を採用したい」という視点も加わっています。 28歳（当時）の未経験がWebデザイナーに転職 Webデザイナーになるまでは、Webデザインどころか、デザインの仕事やプログラミング、Web関係の仕事すらやったことがありませんでした。 最初からデザインのセンスがあったわけでもなく、今見るとWebデザインの勉強を始めた頃作ったサイトは酷いものでした…
初めてのiPhoneアプリを7日間で開発しました。 ウェブサイトの企画・制作が本業の僕にとって、アプリの制作はまったくの未経験。そのくせApp storeでリリースするところまで達成できたのは、 アプリ作成に挑む前の「気持ちの作り方」 技術不足を補ってくれるツール この2つのおかげだと思っています。 アプリの制作に挑戦し、途中で挫折してしまう失敗の原因に多いのは、身の丈に合わない難しすぎるアプリを作ろうとしてしまうことです。 僕の場合は、とにかくアプリを完成させることをゴールとして設定。開発期間を短縮してくれそうなツールがあれば利用することをアリとしました。 その結果、わずか1週間で初めてのアプリの制作を終えられたのです。 アプリをApp Storeからリリースしたことが「ある」と「ない」の差は自分にとっては大きく、ゼロから1にできたことへの達成感は今でも心に残っています。（この記事はアプ
こんにちは、今回がはじめてのnote投稿になります！ タイトルにもある通り、今日はTwitterにて8月に行なっていたUIトレースについて感じたことをまとめていきます。 デザインの勉強を始めたばかりで、どうやって勉強しよう？と悩んでいる人や、最近だとCocoda!に登録してUIデザインの勉強をしてみようかな...と思っている人の参考のひとつにでもなれば嬉しいです。 あくまでも自分なりの見解であり初心者目線で書きますので、どうぞ暖かい目でご覧になってください...。(アドバイス随時受け付けてます！) そしてかなり迷ったのですが、この記事ではトレースしたものだけでなく、アウトプットしたものも全部載せます。プロのデザイナーさんが見たらツッコミどころ満載の作品ばかりだと思いますが、同じような境遇の方の励みになればと思って、、、、では目次です。 目次 1. UIトレースを始めたきっかけ 2. 最
個人開発のUI設計術 - Crieit
あんど( @ampersand_xyz )と申します。 クイズメーカーなど、色々なサービスを個人でリリースしているフリーのエンジニアです。 個人開発を支える技術のアドベントカレンダーではサービスを構築するArchitectureに関する技術の話題が多いなか、周りの方やマシュマロからの匿名メッセージ質問でUIのことに関する質問などが多かったので、本投稿ではUIやデザイン周りに関するTechnic…と言えるほど上等なものではないのですが、そのあたりの技術をお話したいと思います。 なお、自分は正直かなり我流で適当にやっているので、もっといい方法のツッコミなど歓迎しております。 1.画面サイズの最大・最小幅を最初に決めておく まずはじめにここを決めます。 いかにリキッドデザインやレスポンシブで画面を作成するといえども、極端に幅が小さい、または大きいデバイスを相手にする場合、どうしてもサイズ整合性を
商用利用無料、UIデザイン用のSVGアイコンが1100種類！Adobe XDやFigmaのツールも完備されてて、これは便利
企業サイトをはじめ、プロダクト、オンラインショップ、アプリ、ブログなど、さまざまな商用プロジェクトで無料で利用できるSVGアイコンを紹介します。 SVGアイコンの数は1,100種類以上で、しかもオープンソース！ さらに、Adobe XD, Figma, Sketchなどでアイコンが簡単に使えるツールもリリースされています。
Webサイト、スマホアプリの制作・開発に携わるすべての人に役立つ、200種類以上の有料・無料のデザインツールを紹介します。 定番ツールから最近リリースされた注目のツールまで、便利なツールが揃っています。 Awesome Design Tools -GitHub 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 アクセシビリティのツール アニメーションのツール AR（拡張現実）のツール コラボレーションのツール カラーピッカーのツール デザインのフィードバックツール デザインのハンドオフツール デザインパターンとインスピレーションのツール デザインシステムのツール デザインをコードにするツール エクスペリエンスのモニタリングツール フォントのツール スクリーンショットのツール アイコンのツール イラストのツール 情報アーキテクチャの
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンドエンジニアから、デザイナーさんに意識してほしい10のこと｜Pittan｜note
成功法則が詰まったBtoBサイトの標準ワイヤーフレームを無料配布します | knowledge / baigie
ついに、Webアプリでの帳票印刷のベストプラクティスを編み出しました
VPSや自宅サーバーにインストールしたいSaaS代替Webアプリ38選
PhotoshopとIllustratorのほぼ全機能を搭載したAdobe XD並みに軽いプロトタイピングツールが発売
Adobe MAX 2017のスニークス – 人工知能Adobe Senseiの活用技術 - ICS MEDIA
Web制作の常識が変わる、便利な最新オンラインツール48個まとめ
個人開発で即戦力になるツール・サイトまとめ - Qiita
丸よりも丸みを感じる!? スーパー楕円の魅力とデザイン | Spinners Inc.
ウェブデザイン制作が爆速に！便利な最新オンラインツール47個まとめ
Webデザイン100トレース | Hypertext Candy
UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ～業務システムとSaaSのUIを考える
プログラミングスクールを卒業したゴミを面接した結果｜有山 貴清
ベイジのweb制作ワークフロー2018（140のタスクと解説） | ベイジの社長ブログ
エンジニアのための、いますぐ使える文章校正テクニック - ICS MEDIA
もうこれでUI用のアイコンには困らない！商用でも完全無料で利用できる3,000種類のシンプルなアイコン素材
エンジニアのための、いますぐ使える文章校正テクニック - ICS MEDIA
文章作成・メール作成に役立つ！ VS Codeの拡張機能「テキスト校正くん」を公開 - ICS MEDIA
文章作成・メール作成に役立つ！ VS Codeの拡張機能「テキスト校正くん」を公開 - ICS MEDIA
ベイジのウェブ制作ワークフロー2021年版（約100のタスクと解説） | knowledge / baigie
素人が半年頑張ってWebサービスを作った話 - 変なサービスを作るのが好き
ウェブデザイン制作が加速中！便利な最新オンラインツール53個まとめ
ウェブ制作がすご楽に！便利な最新オンラインツール33個まとめ
これなら分かりやすい！Webサイトのデザイン仕様書・指示書の作り方
【2023年版】知るだけで得するフリーランス向けサービスまとめ70選
ベイジの業務システムUIデザインワークフロー（100のタスクを徹底解説） | ベイジのUIラボ～業務システムとSaaSのUIを考える
全くの未経験が独学でWEBデザイナーに転職するまで | SHIROMAG
Webデザイナーだけど初めてのiPhoneアプリを7日間で開発した手順
デザイン初学者がUIトレースを１ヶ月続けてみた｜きなこ
保存版！デザインツールの総まとめ -200種類以上の定番ツールから最近リリースされた注目のツールまで