簡単CSSアニメーション＆デザイン20選（ソースコードと解説付き） | knowledge / baigie
CSSは使いようによっては様々な表現が可能な奥深い言語です。しかし、アニメーションなど凝った動きをするものに関してはコードは見れても実装方法を詳しく解説している記事は多くないように思えます。 この記事では、私（さかっちょ）がTwitterで過去にツイートしたCSSの技術をCodePenで改めて実装し、Twitterでは解説しきれなかった実装方法をより詳しく説明しています。CSS初学者の方にもわかりやすいように解説していますので、ぜひ参考にしてみてください。 その1. 一文字ずつ登場するテキストアニメーション See the Pen [CSS Tips] Text Show-up Motion by Takuro Sakai (@sakaccho) on CodePen. 一文字ずつtransformで移動させています。文字が途切れることなく流れるようにtransition-delayを調整
前工程に参加するだけでは解決しない | ベイジの日報
「企画や戦略の段階から参加できない」 「要件定義に同席させてもらえてない」 「だからアウトプットが適切に作れない」 こうした不満の声は、私が社会人になった20年前からしばしば耳にしていた。これはそれ以前からも存在する「IT業界あるある話」の1つなのだろう。 いわゆる「前工程」「上流工程」に参加できず、仕様を勝手に決められてしまうのは、デザイナーやエンジニアといったクリエイターたちの不満が募りやすいポイントの1つだ。私がデザイナーだった時も、似たような不満を抱いていた時期があった。 ただ、「それは確かに問題だね」と社内で合意が取れたとする。いや、実は合意を取って同席するのは難しくない。なぜならほとんどの関係者は、実際に作る人たちも話に参加してほしい、作り手視点の具体的な意見がほしい、と思っているからである。 なので声をあげれば、いわゆる前工程への参加は割と実現しやすい。しかしそれが実現すると
ベイジの業務システムUIデザインワークフロー（100のタスクを徹底解説） | ベイジのUIラボ～業務システムとSaaSのUIを考える
2021年現在、ベイジの柱の事業はウェブ制作事業とウェブアプリデザイン事業です。ウェブ制作事業は会社設立の2010年からの主力事業で、サービス品質の平準化を目的に2014年頃からワークフローの整備を進めてきました。 一方ウェブアプリデザイン事業については、事業拡大したのがここ数年で、まだワークフローが整備されておらず、各人の裁量に委ねた進め方になっていました。そこで今後の事業拡大とメンバー増員を想定し作成したのが、業務システムやSaaSのUIデザインに特化した「ベイジの業務システムUIデザインワークフロー2021年版」です。 基本的な進め方は国際規格（ISO 9241-210※）の人間中心設計プロセスに基づいて組み立てていますが、細かいタスクの順序や内容は、今までベイジで培ってきたノウハウをふんだんに盛り込み、組み換えています。 また今回ワークフローを整備するうえでは、クライアントごとの開
ベイジのウェブ制作ワークフロー2021年版（約100のタスクと解説） | knowledge / baigie
営業、受注、制作、納品、運用と、ウェブ制作の活動は長期に渡り、そのタスクの種類と量は膨大です。だからこそ、基本的なプロセスや使用するドキュメントなどを明確に定義しておかないと、サービスの品質が担当者により大きく変わることになります。 ベイジは社員がまだ5名の頃、各人に委ねた進め方によって以下のようなトラブルが頻発していました。 ミスが発生しても「次から気をつける」と精神論で終わらせてしまう 担当するディレクターやクリエイターによってタスクの抜け漏れが起きる 担当者それぞれが属人的な進め方をしてて品質が安定しない 役割が不明瞭なグレーゾーンのタスクが放置されてしまう 創造的な仕事の時間が、ルーチンや計画にないタスクに奪われてしまう 新しい社員が入る度に同じことを教えないといけない これら問題を解決するため、2014年頃からワークフローを整備するようになりました。ちなみに私が入社したのはこれ以
ベイジのweb制作ワークフロー2018（140のタスクと解説） | ベイジの社長ブログ
ベイジで社内のワークフローを整理しだしたのは確か2014年頃です。その頃はまだ4～5人しか社員がいない状態で、タスクの粒度も粗く、いくつかのタスクは各人の能力に委ねたものでした。しかし10人を超えて関わる人が増えたあたりから、仕事の進め方も徐々に変わり、ワークフローの綻びも色々と出始めてきました。そこで今年の春に、全社員参加のもと、これまでの進め方の問題点を話し合ったうえで、ワークフローの大幅な刷新を行いました。本エントリーはそのご紹介です。 刷新にあたって、受注から納品までをサブタスクを含めて約140に分解しました。また、各タスクで用いられるドキュメントもできるだけフォーマット化し、効率よくドキュメントワークができるようにしました。 合わせて、タスク毎の職能の再定義を行いました。プロデューサー、ディレクターといった業務範囲が曖昧な職能は、より厳密な職能の定義を試みました。例えばディレクタ
成功法則が詰まったBtoBサイトの標準ワイヤーフレームを無料配布します | knowledge / baigie
約1年前、BtoB企業における顧客獲得型サイトの勝ちパターンをまとめた『BtoBサイト・チェックリスト』を、ベイジ、才流さん、WACULさんの3社連名で発表し、大きな反響をいただきました。 このチェックリストはブログで公開しただけではなく、私たちのウェブ制作の現場でもフル活用されています。この1年間に手掛けた多くのBtoBサイトが、このチェックリストを満たすように設計され、多くのBtoBサイトでコンバージョン数/率やフォーム誘導数/率の向上など、ポジティブな変化が生まれました。 このような活動の中から、『BtoBサイト・チェックリスト』の内容を満たした『BtoBサイト・ワイヤーフレーム』なるものが誕生しました。これを今回、皆さんにご提供します。リード情報なども一切取らず、そのまま丸ごとお渡しします。 BtoBサイト標準ワイヤーフレームXD版（770KB） BtoBサイト標準ワイヤーフレーム
管理画面のUIデザインにおける20の改善ポイント | ベイジのUIラボ～業務システムとSaaSのUIを考える
私たちの日常業務で使われる管理画面は、大量の情報と複雑な機能で構成され、利用難易度が高い傾向にあります。検索性の乏しい管理画面の一覧から1つの情報を見つけるために、どれだけの時間を費やしているでしょうか。 1億円の工数をかけて開発した機能も、低品質なデザインでは、機能の存在に気付かれなかったり、間違って使われたりと、期待した業務コストの削減に繋がりません。これでは、1億円を捨てたようなものです。 使い勝手の良くないデザインは、ユーザーだけではなく、開発者にも悪い影響を及ぼします。複雑な構造と分かりにくい操作体系の管理画面は、開発やテストの手間を増やし、その後の機能拡張も難しく、改修コストも増大します。 これらのリスクを抑えるためには、UIデザインの基本原則を理解し、適切に管理画面を設計することが重要です。 私たちは管理画面のUIデザインの改善やリニューアルを手掛けることも多いのですが、その
UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ～業務システムとSaaSのUIを考える
デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上（2019年12月現在）ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら
UIデザインにおけるナビゲーションのデザインパターンまとめ | ベイジの社長ブログ
前回エントリーでは「UIデザイナーが理解しておくべき11種類のナビゲーションと特徴」として、ナビゲーションの種類を、機能的な側面から分類し、ご紹介しました。 続編となる今回は、ナビゲーションをデザイン的な側面からとらえ、形状、ふるまい（動き）、階層というの3種類の表現軸に分けて、ナビゲーションでよく使われているデザインというものを整理してみました。 形状のデザイン UIにおけるナビゲーション要素が、主にどのような形状でデザインされているか、というパターンをここではご紹介しています。 メニューバー メニューをボタン化し、バー状にまとめたデザインです。PCサイトのグローバルナビゲーションやローカルナビゲーションなどによく採用されます。 一覧性に優れ、一目でナビゲーション要素と分かるため、ユーザビリティに優れます。一方、ある程度の表示スペースを必要とするため、スマートフォンではあまり用いられない
サイトやアプリのユーザビリティを向上させる35のポイント | ベイジの社長ブログ
デバイスがどのように進化しようが、アプリの時代になろうが、ユーザビリティは変わらず求められるものです。Web/IT業界では「使いやすさ」という意味で気軽に使われる言葉ですが、奥は深く、原論を解説した書籍もいくつか出ています。 学術的な解説はそういった書籍に任せるとして、ここでは、経験の浅いデザイナー、あるいは非デザイナー（ディレクター、Web担当者、エンジニアなど）向けに、ユーザビリティの向上に繋がる基本的な要点をまとめてみました。 ボタン、テキスト、コピーなど ボタンやテキストのデザインは、ユーザビリティを左右する大きなポイントです。表面的な美観に流されず、ユーザ視点で考えていきましょう。 1：ボタンじゃない要素は、ボタンと似たデザインにしない ボタンのデザイン次第で、サイトやアプリの使いやすさは大きく変わります。特に、ボタンでない要素にボタンのようなデザインを施すことは、どこが押せるの
サイトやアプリのユーザビリティを向上させる35のポイント | ベイジの社長ブログ
デバイスがどのように進化しようが、アプリの時代になろうが、ユーザビリティは変わらず求められるものです。Web/IT業界では「使いやすさ」という意味で気軽に使われる言葉ですが、奥は深く、原論を解説した書籍もいくつか出ています。 学術的な解説はそういった書籍に任せるとして、ここでは、経験の浅いデザイナー、あるいは非デザイナー（ディレクター、Web担当者、エンジニアなど）向けに、ユーザビリティの向上に繋がる基本的な要点をまとめてみました。 ボタン、テキスト、コピーなど ボタンやテキストのデザインは、ユーザビリティを左右する大きなポイントです。表面的な美観に流されず、ユーザ視点で考えていきましょう。 1：ボタンじゃない要素は、ボタンと似たデザインにしない ボタンのデザイン次第で、サイトやアプリの使いやすさは大きく変わります。特に、ボタンでない要素にボタンのようなデザインを施すことは、どこが押せるの
誰でも良い文章が書ける！Webライティング11のルール（スライド） | ベイジの社長ブログ
Web制作者を悩ませる問題に、「Webを熟知したコピーライターがいない問題」があります。特にメディア型のWebサイトの場合、文章の質がコンテンツパワー、ひいてはWebサイトの集客力・訴求力そのものになってきます。しかし現状、プロジェクトメンバーにコピーライターが参加しないのは当たり前になっています。 また、もしコピーライターをプロジェクトに参加させたいと思っても、Web特有のユーザ行動や設計思想、SEOなどに精通し、Webに相応しい文章を作ってくれるコピーライターは、この市場にごくわずかしか存在しないのではないでしょうか。 このWebのコピー問題は、考える以上に深刻です。なぜなら、文章の良し悪しで、コンバージョン率もユーザの満足度もブランドイメージも、簡単に変わってしまうためです。そして、その問題に対する私たちの結論は「全員でコピーをチェックして校正しよう」ということです。 私自身は今まで
Webの仕事をするなら最低限知っておくべき戦略フレームワーク×10 | sogitani.baigie.blog
経営やマーケティング、ブランディングなど、ビジネスを語る際に必要な論理的思考。その思考パターンを定型化し、誰でも使えるようにしたのが戦略フレームワークです。戦略フレームワークはビジネスのあらゆる分野で使われており、有名・無名を含めると、膨大な数が存在します。 戦略フレームワークを使うと、現状を論理的に構造化し、客観的に俯瞰できるようになります。また、いつもフレームワーク発想で考えるクセを付けていると、ヒアリングしたその場で企業が抱える問題点が見えてきたり、自分の主張や提案を、分かりやすく説得力をともなって伝えることができるようにもなります。 Web業界はテクノロジーの影響が非常に強い業界です。特に制作や開発に深く関わる業種・職種ほど、ビジネスの本質ではなく、技術的なトレンドに流された発想に陥りがちです。 しかし、戦略フレームワークの考えをマスターしていれば、技術トレンドに流されず、ビジネス
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
