簡単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を調整
【2024年6月版】管理画面のUIデザインにおける25の改善ポイント | ベイジのUIラボ～業務システムとSaaSのUIを考える
私たちの日常業務で使われる管理画面は、大量の情報と複雑な機能で構成され、利用難度が高い傾向にあります。検索性の乏しい管理画面の一覧から1つの情報を見つけるために、どれだけの時間を費やしているでしょうか。 1億円の工数をかけて開発した機能も、低品質なデザインでは、機能の存在に気付かれなかったり、間違って使われたりと、期待した業務コストの削減に繋がりません。これでは、1億円を捨てたようなものです。 使い勝手の良くないデザインは、ユーザーだけではなく、開発者にも悪影響を及ぼします。複雑な構造と分かりにくい操作体系の管理画面は、開発やテストの手間を増やし、その後の機能拡張も難しく、改修コストも増大します。 これらのリスクを抑えるためには、UIデザインの基本原則を理解し、適切に管理画面を設計することが重要です。 私たちは管理画面のUIデザインの改善やリニューアルを手掛けることも多いのですが、その経験
話が上手な人と下手な人の違い | knowledge / baigie
「もっと話上手になれたらいいのに」と思っている人は多いのではないでしょうか。 普通のビジネスパーソンは、アナウンサーのような卓越した話術を身に付ける必要はありません。しかし、話上手になることができれば、交渉が得意になり、営業も人事評価も転職活動も有利に進められるようになります。仕事におけるメリットは計り知れません。 私たちの会社でも、特に顧客と直接対話する機会が多いディレクターやデザイナーには、業務知識だけではなく、顧客との話し方についてもなるべくフィードバックしています。会話のクオリティは、サービスの品質や満足度に深く関わると思うからです。 最近は、会話ではなく、メールやチャットで済む機会も増えています。一方で、話上手な人はテキスト・コミュニケーションも大抵上手な印象があります。話術の中には、コミュニケーションに共通する普遍的ななにかが含まれているのでしょう。 こんな記事を書いてはいます
ベイジのweb制作ワークフロー2018（140のタスクと解説） | ベイジの社長ブログ
ベイジで社内のワークフローを整理しだしたのは確か2014年頃です。その頃はまだ4～5人しか社員がいない状態で、タスクの粒度も粗く、いくつかのタスクは各人の能力に委ねたものでした。しかし10人を超えて関わる人が増えたあたりから、仕事の進め方も徐々に変わり、ワークフローの綻びも色々と出始めてきました。そこで今年の春に、全社員参加のもと、これまでの進め方の問題点を話し合ったうえで、ワークフローの大幅な刷新を行いました。本エントリーはそのご紹介です。 刷新にあたって、受注から納品までをサブタスクを含めて約140に分解しました。また、各タスクで用いられるドキュメントもできるだけフォーマット化し、効率よくドキュメントワークができるようにしました。 合わせて、タスク毎の職能の再定義を行いました。プロデューサー、ディレクターといった業務範囲が曖昧な職能は、より厳密な職能の定義を試みました。例えばディレクタ
相手の立場を考えた「気がきく」ディレクションとは | ベイジの日報
対顧客におけるディレクションについて、メールやチャットでのやりとりは日々の業務に当たり前のように浸透している。直接顔を合わせないコミュニケーションが増えているからこそ、物事を伝える際には相手の属性や性格、その時々のシチュエーションなどへの配慮を欠くと、望まない結果につながりやすい。 そんな中、相手の状況を見抜く力が優れたいわゆる「気がきく」ディレクターの行動には幾つかの共通点があると私は考えている。例えば、いくつものプロジェクトを掛け持ちながら全体を俯瞰するプロデューサークラスのような管理者と、プロジェクト中に定められたひとつひとつの細かなタスクを現場レベルでこなす担当者に対してでは、同じ事象を伝える場合でも粒度を考慮しているのだ。今日はその共通点を具体的にまとめてみたいと思う。 管理者には「結論第一・注目点の明示・方針の自己判断」 プロデューサーのように俯瞰する立場の人は、同じプロジェク
デザイナーと働くなら知っておきたい4タイプのデザイナー像 | ベイジの社長ブログ
世間一般ではデザイナーは一括りに語られがちですが、デザイナーも千差万別、一人一人に個性があり、異なる価値観を持っています。この多種多様なデザイナーを一種類にまとめて扱うことは、デザイナーとのミスマッチに繋がり、デザイナーを擁する組織のマネジメントにとって、深刻な問題を引き起こすこともあります。 自分自身は経営者兼デザイナーとして仕事をし、今まで多くのデザイナーを見てきました。その私の経験則でいえば、デザイナーは大きく4つのタイプに分類できると考えています。例えば採用面接などで新たにデザイナーと出会った際には、まずはこの4タイプを手がかりにして、その方の理解を深めていったりします。 私が考えるデザイナーの4つのタイプとは、縦軸に「挑戦的」「保守的」、横軸に「感覚的」「論理的」を置いた4象限で表現できます。以下がその図です。 ここからは、理想実現型、成果追求型、共同作業型、実務遂行型の順に、そ
デザイナーじゃなくても知っておきたい色と配色の基本 | knowledge / baigie
色は私たちの身近に存在する視覚要素であり、日々の生活や行動に多大な影響を与えています。しかし、美術やデザインの専門教育を受けない限り、これほど身近な色を体系的に学ぶ機会はほとんどありません。 近年、ビジネスの現場でもデザインの重要性がよく語られます。ビジネスレイヤーで語られるデザインは課題解決を意味する広義のデザインであることも多いですが、その概念がプロダクトに落ちる段階では、ビジュアルデザインのような狭義のデザインも考えていかなくてはなりません。自分自身がデザイナーではなくとも、デザインを評価・判断すべき立場になることも、当然あるでしょう。 デザイナーでなくても、仕事の中で色を扱うシーンは他にもあります。PowerPoint等を使ってビジネス文書を作成をするとき、誰もが色を用いるでしょう。色の知識があれば、より効果的なドキュメント作成が可能になります。 このように考えると、色はデザイナー
制作会社がクライアントに切られてしまう一番の理由とは？ | ベイジの日報
昨年度の当社はほぼ100%が元請けだった。ここ数年、元請け比率は非常に高く、企業のWeb担当者の声を直接聞く機会に恵まれているともいえる。 その中でも新規で取引を始める顧客のほとんどは、サイトのお問い合わせフォームか電話から折衝が始まっている。その依頼の多くはサイトリニューアルである。ということはつまり、過去に既存のWebサイトを作った制作会社（代理店や開発会社）が存在しており、そのうえでネットで他の制作会社を検索し、私たちを見つけ、声をかけてきている。その背景には、今まで付き合ってきた制作会社に対する大きな不満があることが多い。 お会いした際には当然、今までの経緯の一環として、制作会社の何が不満だったのかを聴くことになる。きちんとカウントしたわけではないが、感覚値でいうと8割くらいは同じ理由である。それは「言ったことしかしてくれない」「自分たちから提案してくれない」である。ようするに制作
ワイヤーフレームを捨ててHTMLプロトタイプに移行した結果 | ベイジの社長ブログ
私たちの会社では長らく、画面設計といえばPowerPointを使い、ワイヤーフレーム（以下、WF）を作っていました。Web制作会社における非常にスタンダードなやり方であったため、ベターな方法と受け入れつつも、例えば以下のような無駄も多く、決してベストではないとも感じていました。 設計者がコーダーに文書構造の意図を説明する時間の無駄 設計者が考えたファイル構造やヘッダ情報を定義するためのドキュメントの無駄 コーディング時にWFやPSD上のテキストをコピペして移し替える無駄 リンク構造や動き、使い勝手を紙面上で表現しようとする努力の無駄 共通パーツに修正が入った時に各ページごとに修正を入れていく無駄 PC用とスマホ用の2種類のWFを作る無駄 更新するたびに新しいWFを印刷する紙の無駄 いずれも工夫次第で軽減できる問題でしたが、意思疎通のための中間成果物の体裁を整えるための多くの時間が無駄では？
立場が上がるほど努力は必要になる | ベイジの日報
最初は下っ端ほど努力しないといけないと思っていた。だけど今は、上に行けば行くほど努力しなくてはいけないと思っている。 自分が下っ端だった頃は、いろいろ周りが教えてくれたし、ミスをしても上の人が責任を取ってくれた。また自分がチームを引っ張るということをしなくても良かったので、模範となるような姿勢を見せる必要もなかった。 下っ端であっても、自分自身を成長させるための努力は必要だった。それをしなくて将来はないし、誰も認めてくれないから当たり前だ。しかし反対に考えれば、自分を成長させるための努力さえしていれば、おのずと結果が付いてきて、自然と評価されたのが、下っ端のころだったと思う。 しかし、上に立つ立場の人の努力は、自分のことだけを考えればいいわけではない。自分自身を成長させる努力は当たり前のこととして、さらに、チームを成長させるための努力、部下がこの人に付いていきたいと思わせるための努力なども
成長する発想と成長しない発想 | knowledge / baigie
「自分らしさ」にこだわって働いた結果 私が社会に出たのは1997年。最初の会社は同期だけで500人もいる大企業でした。経営は安定し、福利厚生も充実。在籍しているだけで社会的信用が担保される会社でした。 学生の頃の私は、人とは少し違った視点で物事を捉えると友人から評価されていました。流行りもの、ありがちなもの、浮ついたもの、軽薄なものには与しない。メジャーではなくマイナーを好む自分でありたい。自分だけは本質が見えていると信じ、鋭い指摘を入れ、否定する。それが「自分らしさ」でした。 社会人になっても、「自分らしさ」は絶対に失いたくない、社会に染まりたくない、平凡なサラリーマンになりたくない、と強く思って働いていました。 さほど重要でなくとも、プライベートを優先するのは当たり前でした。職場の飲み会を欠席するのも日常茶飯事です。残業代が出ないのだから、飲み会に出る必要はない。仕事終わりの一杯が楽し
切れないハサミと使えないWebデザイン | ベイジの社長ブログ
本エントリーは、以下の目次で構成されています。 2種類のハサミと2種類のWebデザイナー Webデザインの特殊性 ビジュアルのディテールに神が宿らないWebデザイン 美しいが使えないWebデザインをしてしまう理由 Webデザイナーを支配する「強固な固定観念」と「裏の動機」 美しいビジュアルの根底にあるデザインの本質 本当に「最近のWebデザインはつまらない」のか？ ミスマッチが生む不幸なWebデザイン Webデザイナーに求められる自らのスタンス Web制作会社にも求められる明確な価値観 2種類のハサミと2種類のWebデザイナー 例えば、以下のような2種類のハサミが存在するとします。 工芸品のように美しいが切れ味はよくないハサミ 見た目はそれなりだが非常によく切れるハサミ 1は、ハサミとしては売れないでしょう。ただ、それが刺激的で斬新なビジュアルであった場合には、特別な賞を取ったり、美術館に
アップルのWebサイトが今さらスマートフォン対応をした理由 | ベイジの社長ブログ
2014年9月9日、アップルの新製品発表会が行われました。 人々の注目は、iPhone6とApple Watchだったと思いますが、Web制作者としてちょっとした驚きだったのは、発表と同時にWebサイトがスマートフォン対応したことです。 現在、多くの企業サイトで、スマートフォンからのアクセスが急増しています。スマートフォンユーザが直接的なターゲットとは考えにくい企業サイトでさえ、スマートフォンからのアクセスが3～4割を超えることが当たり前になってきました。 モバイルファーストという言葉も生まれ、スマートフォン対応をしているかどうかを、検索アルゴリズムの評価項目に加えているとGoogleが公言するほど、「スマートフォン対応＝正しいWebサイト」とさえいえるようなムードの中で、アップルだけは、頑なにWebサイトのスマートフォン対応を行なってきませんでした。 このアップルの選択は、「アップルでさ
UIデザイナーが理解しておくべき11種類のナビゲーションと特徴 | ベイジの社長ブログ
WebサイトやアプリケーションのUIは、いくつかの要素の組み合わせで構成されますが、使いやすさに最大の影響を与えるのはナビゲーション要素でしょう。ナビゲーションのデザインを制する者がUIデザインを制する、といっても過言ではありません。 というわけでここでは、UIで最も大事な要素、ナビゲーションというものを整理して理解するために、その種類と特徴をまとめてみました。 1. グローバルナビゲーション ユーザがWebサイトやアプリを使う際に、もっともよく使われるのが、このグローバルナビゲーションです。通常は画面のどこかに常設されており、画面遷移をしても、決まった場所に、決まった並びで必ず表示されます。 メニューの構成方法としては、情報種別、機能種別、対象者／状況別、利用頻度別などの切り口があります。 Appleサイトのグローバルナビゲーション。どの画面でも、同じメニュー構成・同じデザイン・同じ場所
ワンランク上のHTMLコーディングを行うための18のポイント | ベイジの社長ブログ
HTMLコーディングの初級というと、どの程度のスキルを差すのでしょうか。弊社では、以下のようなことがひとまずできていると、だいたい初級レベルを越え始めた段階かな、という気がしています。 ターゲットブラウザで大きな崩れがない。 リンク漏れや原稿違いなどのヒューマンエラーの頻度が極めて低い。 バリデーター・チェックでエラーが出ない。 逆に、これだけのことができて、なぜまだ初級レベルなのでしょうか。それは、現場では、これだけでは不十分だからです。ブラウザでひとまず正常に表示されるだけでなく、改修に素早く対応できる柔軟性、協業や運用後の更新を楽にするルールの一貫性や簡潔さ、HTMLの概念をきちんと踏まえた正しい構造設計なども、求められてくるからです。 そこでここでは、脱・初級者を目指す方のために、弊社内で行っているHTMLコーディングの、いわゆるエラーということ以外のチェックポイントを、まとめてみ
人見知りでも交流会を有意義に過ごせる9つの方法 | ベイジの社長ブログ
私は、実はかなり人見知りです。今の私を知っている人からは意外に思われるかもしれませんが、元々知らない人と話すのが得意ではなく、そういう人が多くいる場に行くと、結構プレッシャーを感じるタイプです。 家族や友人の間であれば、人見知りも魅力的な個性になりますが、ビジネスの世界では人見知りで得することはほとんどありません。特に会社を経営し、自分で営業をしなければならない私のような人間は、人見知りだからといって消極的になっていい理由は全くありません。 起業を決意するにあたって重視したことの一つに、交流会への参加があります。知らない人同士が、時に立食形式で交流する場です。人脈が広がるきっかけになる大事なイベントですが、知らない人が苦手な人見知りにとっては、まさに試練の場とも言えます。 しかし人間、数をこなしてみるものですね。最初は気が重かったこの手の交流会も、今ではすっかり慣れてしまいました。実際に人
スマートフォン用サイトで動画を扱う時のポイント | ベイジの社長ブログ
最近スマートフォン用サイトの引き合いが増えてきていますが、そこで培ったノウハウもこのブログで紹介していこうと思います。今回は、スマートフォン（およびタブレット）用サイトでの動画の取り扱いについて。 スマートフォンで動画というと、真っ先に思いつくのはYoutubeにアップしてリンクを張り付ける方法ですが、企業の内規や動画の性質によっては、Youtube上に動画をアップすることができない場合もあります。先日担当したキャンペーンサイトもまさにそうでした。というわけで、ここではYoutube貼り付けじゃない方法での、スマートフォン/タブレット端末用サイトで動画を掲載する際のポイントをご紹介します。違ってるところがあればコメントでご指摘いただけると幸いです。 ちなみに、プラットフォームやOS毎の実装状況をひとまずまとめると以下の通り。なお、スマートフォン/タブレット版はデフォルトブラウザでの利用が前
Photoshopユーザが今すぐFireworksに乗り換えるべき10の理由 | ベイジの社長ブログ
Webデザインにおけるメインのデザインツールとして多く使われているPhotoshopとFireworks。我々の業界内において、どちらの方がデザインツールとして便利か、という議論がよく行われますが、いずれか一つしか使いこなしていないユーザによる比較論ではあまり意味がないでしょう。日頃から使いなれているツールの方が使いやすい、と感じるに決まっているからです。ここで参考になるのは、両方のツールを同等に使った経験を持ち、かついずれにも過剰なこだわりや愛着を持ってないデザイナーの声なのではないでしょうか。 実は私自身はもともとPhotoshopでWebサイトのデザインを作っていました。しかし以前勤めていた会社でFireworksを使っていた人が多かったため、あるプロジェクトで一時的にFireworksを使ってみたところ、色々な面でFireworksの方が優れていると感じ、Fireworksに乗り換
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ベイジの日報
生活習慣を変えてみた結果 | ベイジの日報