簡単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を調整
ベイジのweb制作ワークフロー2018（140のタスクと解説） | ベイジの社長ブログ
ベイジで社内のワークフローを整理しだしたのは確か2014年頃です。その頃はまだ4～5人しか社員がいない状態で、タスクの粒度も粗く、いくつかのタスクは各人の能力に委ねたものでした。しかし10人を超えて関わる人が増えたあたりから、仕事の進め方も徐々に変わり、ワークフローの綻びも色々と出始めてきました。そこで今年の春に、全社員参加のもと、これまでの進め方の問題点を話し合ったうえで、ワークフローの大幅な刷新を行いました。本エントリーはそのご紹介です。 刷新にあたって、受注から納品までをサブタスクを含めて約140に分解しました。また、各タスクで用いられるドキュメントもできるだけフォーマット化し、効率よくドキュメントワークができるようにしました。 合わせて、タスク毎の職能の再定義を行いました。プロデューサー、ディレクターといった業務範囲が曖昧な職能は、より厳密な職能の定義を試みました。例えばディレクタ
デザイナーと働くなら知っておきたい4タイプのデザイナー像 | ベイジの社長ブログ
世間一般ではデザイナーは一括りに語られがちですが、デザイナーも千差万別、一人一人に個性があり、異なる価値観を持っています。この多種多様なデザイナーを一種類にまとめて扱うことは、デザイナーとのミスマッチに繋がり、デザイナーを擁する組織のマネジメントにとって、深刻な問題を引き起こすこともあります。 自分自身は経営者兼デザイナーとして仕事をし、今まで多くのデザイナーを見てきました。その私の経験則でいえば、デザイナーは大きく4つのタイプに分類できると考えています。例えば採用面接などで新たにデザイナーと出会った際には、まずはこの4タイプを手がかりにして、その方の理解を深めていったりします。 私が考えるデザイナーの4つのタイプとは、縦軸に「挑戦的」「保守的」、横軸に「感覚的」「論理的」を置いた4象限で表現できます。以下がその図です。 ここからは、理想実現型、成果追求型、共同作業型、実務遂行型の順に、そ
デザイナーはなぜ「普通」を知る必要があるのか？ | ベイジの日報
バイアスや意思決定に関する書籍を読むと、統計学や確率、平均の話になることが多い。 バイアスのない意思決定というのは、統計学的にもっとも成功確率の高い選択をする、ということでもある。あくまで確率の話なので、短期的な結果だけみればその選択によって失敗することもあるだろう。しかし長い目で見た時には、平均への回帰が起こり、総じて成功確率が高まる。そういう判断の仕方が常時できた方が良い、という考えがその根底にある。 実はこの話は「普通を見極める」という話に繋がってくる。「普通」とは、曖昧で、時に都合よく使われる言葉である。何が「普通」かは人それぞれだ、という結論になることも多い。しかし、正解が分からない仕事をする上ではこの「普通を見極める力」は不可欠である。 「普通を見極める力」とは、「多数派を見極める力」「平均値を見極める力」「中央値（ボリュームゾーン）を見極める力」「最大値を見極める力」と、文脈
未経験でも1カ月で即戦力クラスの知識が身に付く『webデザインドリル』公開 | knowledge / baigie
「即戦力レベルのwebデザイナーが最低限持っている知識を1カ月で身に付ける」ということを目的としたドリルを作りましたので、皆様に公開します。 ダウンロード[PDF/PSD/XD]（92MB） 本ドリルは、約140ページの参考書兼問題集になっています。まずは出題される問題を解き、その上で解説を読んで理解し、再度問題を解きなおすのが基本的な流れです。 内容は、私たちが未経験デザイナーの採用を進める中で、「こういう知識は早い段階で身に付けておいてほしいよね」という知識をまとめました。また演習用のPSD/XDファイルもドリルに含まれています。 身に付くのはあくまで「即戦力クラスの知識」であって、「即戦力」になれるわけではありません。デザインには、非言語・非定型なスキル領域も多々あるため、座学だけで即戦力にはなりません。しかしそれでも、ベースとなる知識は絶対に必要ですし、それを指南する参考書は、的を
私が耳にしたアクセス解析に関する10の誤解 | ベイジの社長ブログ
Google AnalyticsやAdobe Analyticsなど、最近の企業サイトには必ずアクセス解析のツールが導入されています。一方でそれを有効活用できていない企業もまだまだ多いようです。先日もある企業から依頼され、アクセス解析の基本レクチャーを実施しました。私たちは解析専門の会社ではなく制作会社ですが、そんな会社に対しても「教えてほしい」と依頼が来るような状況ともいえます。 解析ツールの設置自体は非常に簡単です。正しく設置すればすぐデータは収集されます。しかしデータの扱い方、解釈の仕方を適切に捉えることが難しく、このことがアクセス解析の活用を困難にしています。 ここでは、私が今まで実際で聴いたアクセス解析に対する誤解とその解説を10個ピックアップしました。本エントリーを通じて、アクセス解析に対する理解が少しでも進めばと思っています。 機能が多すぎて使いこなせないサイトのページビュー
なぜ私たちは「web制作会社」という古臭くてダサい肩書を使うのか？ | ベイジの社長ブログ
現在公開中の自社サイトリニューアル時に悩んだことの一つが「自分たちをどう名乗るか」ということでした。様々なことを熟考した結果、「web制作会社」が相応しいと判断したのですが、その結論に至るまでの諸々の考えを、改めてまとめてみました。 目次web制作業の実態業界で嫌われている「制作」という言葉web制作に対する市場ニーズ事業ドメインを変えるリスクドリルと穴の話ブランド・レレバンスとブランド選好性顧客の選考プロセス顧客を具体的にイメージする私たちがweb制作会社でなくなる時web制作業の実態web制作会社というのは、一般的には、「企業から依頼を受けてwebサイトを作ることができる会社」と認識されていることでしょう。しかし、具体的な業務内容は千差万別です。 2000年代中頃のFlash全盛時代あたりまでは、グラフィックデザインから派生した商業デザインの一形態として、ビジュアルデザインにプログラミ
デザイナーじゃなくても知っておきたい色と配色の基本 | knowledge / baigie
色は私たちの身近に存在する視覚要素であり、日々の生活や行動に多大な影響を与えています。しかし、美術やデザインの専門教育を受けない限り、これほど身近な色を体系的に学ぶ機会はほとんどありません。 近年、ビジネスの現場でもデザインの重要性がよく語られます。ビジネスレイヤーで語られるデザインは課題解決を意味する広義のデザインであることも多いですが、その概念がプロダクトに落ちる段階では、ビジュアルデザインのような狭義のデザインも考えていかなくてはなりません。自分自身がデザイナーではなくとも、デザインを評価・判断すべき立場になることも、当然あるでしょう。 デザイナーでなくても、仕事の中で色を扱うシーンは他にもあります。PowerPoint等を使ってビジネス文書を作成をするとき、誰もが色を用いるでしょう。色の知識があれば、より効果的なドキュメント作成が可能になります。 このように考えると、色はデザイナー
Webデザインの没個性化と認知容易性 | ベイジの社長ブログ
Webサイトのデザインは紙のデザインと異なり、技術的な制約が強く、特に最近は様々な環境（デバイス、ブラウザ、画面サイズ、屋内・屋外など）での閲覧に対応できることを求められます。そのため、戦略から要件、コンテンツ、機能と論理的にデザインを決めていくと、どこかで見たことあるような没個性なデザインになりやすいものです。（注：ここでいうデザインは視覚的なデザインを指します） マルチデバイス、マルチブラウザが進み、レスポンシブWebも選択肢の一つとして一般化した昨今では、Webデザインの没個性化はますます進んだ印象があります。例えば、Googleが公開しているマテリアルデザインのガイドラインを見ても、デザインのパターン化と属人性排除の思想を如実に感じることができます。また、データドリヴンなサイト改善を積極的に行っていくと、「デザインの個性」と成果に大した因果関係がないことを痛感します。 没個性なデザ
制作会社がクライアントに切られてしまう一番の理由とは？ | ベイジの日報
昨年度の当社はほぼ100%が元請けだった。ここ数年、元請け比率は非常に高く、企業のWeb担当者の声を直接聞く機会に恵まれているともいえる。 その中でも新規で取引を始める顧客のほとんどは、サイトのお問い合わせフォームか電話から折衝が始まっている。その依頼の多くはサイトリニューアルである。ということはつまり、過去に既存のWebサイトを作った制作会社（代理店や開発会社）が存在しており、そのうえでネットで他の制作会社を検索し、私たちを見つけ、声をかけてきている。その背景には、今まで付き合ってきた制作会社に対する大きな不満があることが多い。 お会いした際には当然、今までの経緯の一環として、制作会社の何が不満だったのかを聴くことになる。きちんとカウントしたわけではないが、感覚値でいうと8割くらいは同じ理由である。それは「言ったことしかしてくれない」「自分たちから提案してくれない」である。ようするに制作
ワイヤーフレームを捨ててHTMLプロトタイプに移行した結果 | ベイジの社長ブログ
私たちの会社では長らく、画面設計といえばPowerPointを使い、ワイヤーフレーム（以下、WF）を作っていました。Web制作会社における非常にスタンダードなやり方であったため、ベターな方法と受け入れつつも、例えば以下のような無駄も多く、決してベストではないとも感じていました。 設計者がコーダーに文書構造の意図を説明する時間の無駄 設計者が考えたファイル構造やヘッダ情報を定義するためのドキュメントの無駄 コーディング時にWFやPSD上のテキストをコピペして移し替える無駄 リンク構造や動き、使い勝手を紙面上で表現しようとする努力の無駄 共通パーツに修正が入った時に各ページごとに修正を入れていく無駄 PC用とスマホ用の2種類のWFを作る無駄 更新するたびに新しいWFを印刷する紙の無駄 いずれも工夫次第で軽減できる問題でしたが、意思疎通のための中間成果物の体裁を整えるための多くの時間が無駄では？
Sketchが使い物になるかPhotoshopユーザが検証してみた（スライド付） | ベイジの社長ブログ
弊社では数年前にWebのデザインツールをFireworksからPhotoshopにしました。Photoshopには非常に多くの機能が搭載されていながら、一方でWebに最適化されているかというとそうではない側面も多々あります。 そんな中、最近気になっているのが、新たなデザインツールとして徐々に広まりつつあるSketch。海外ではPhotoshop並みに使われているという調査もありします。そこでPhotoshop歴10年（途中3年ほどFireworks）の弊社アートディレクター兼デザイナーの荒砂が、PhotoshopとSketchの機能を比較し、最終的にどう判断すればいいか、スライドにまとめてくれました。 詳細はスライドを見ていただくとして、特に異なっている点だけを表にまとめて比較すると、以下のような感じになります。 ○：機能として存在し、優れている △：機能として存在するが、やや劣っている
デザインに何度も社内チェックを入れることの大切さ | ベイジの日報
うちの会社はデザインの社内チェックを非常に重視している。デザイナーが初案を作り上げてからクライアント提出までに一週間近くかかることも特に珍しいことではない。 一方、採用の応募者や他社の方とお話をすると、デザインの社内チェックをほとんど入れない会社もあるようである。つまり、デザイナーがデザインを仕上げたらディレクターがそのまま持っていく、というケースである。さらに、今まで色々なキャリアのデザイナーと話をしてきたが、この社内チェックについて、否定的な考えを持っている人も少なからずいるようである。 そのベースになっているのは、主に以下のような考えではないだろうか。 出してみないと分からないんだからさっさとクライアントに見せた方がいい。 クライアントに直接ダメ出しをされた方がデザイナーが育つ。 物事はバランスだと思うので、この見解を全否定するつもりはない。しかし、それでもうちの会社では、デザインの
デザイン提案に説得力を持たせる6つのステップ（スライド付き） | ベイジの社長ブログ
Webサイトのデザインの方向性決めというのは、検討が長引いたり、スケジュールの遅れに繋がったりする要注意ポイントの一つです。弊社も例外ではありませんが、一方で、デザインに至った過程を丁寧に解説することで、スムーズに進めることは可能であるとも感じています。ここでは、デザインコンセプトを自然に理解していただくために弊社が行っている提案方法を共有しようと思います。 以下のスライドは、実際に使われたスライドです。公開用に細部は少し変えましたが、内容はほとんどそのままです。 クライアントは、株式会社マネジメントサービスセンター（以下、MSC）という企業の人事戦略や人材育成の支援を行っているB2B企業です。ターゲットは人事部や経営層などで、前段として戦略、設計が完了し、ベースとなるデザイン案を初めて提案する際に使ったものです。こちらを元に、ステップごとに細かな解説をします。（スライド中に出てくる検討プ
誰でも良い文章が書ける！Webライティング11のルール（スライド） | ベイジの社長ブログ
Web制作者を悩ませる問題に、「Webを熟知したコピーライターがいない問題」があります。特にメディア型のWebサイトの場合、文章の質がコンテンツパワー、ひいてはWebサイトの集客力・訴求力そのものになってきます。しかし現状、プロジェクトメンバーにコピーライターが参加しないのは当たり前になっています。 また、もしコピーライターをプロジェクトに参加させたいと思っても、Web特有のユーザ行動や設計思想、SEOなどに精通し、Webに相応しい文章を作ってくれるコピーライターは、この市場にごくわずかしか存在しないのではないでしょうか。 このWebのコピー問題は、考える以上に深刻です。なぜなら、文章の良し悪しで、コンバージョン率もユーザの満足度もブランドイメージも、簡単に変わってしまうためです。そして、その問題に対する私たちの結論は「全員でコピーをチェックして校正しよう」ということです。 私自身は今まで
PCサイトのUIデザインにおける12のトレンド | ベイジの社長ブログ
スマートフォンの普及で、PCで閲覧するWebサイト（以下、PCサイト）に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景
サイトやアプリのユーザビリティを向上させる35のポイント | ベイジの社長ブログ
デバイスがどのように進化しようが、アプリの時代になろうが、ユーザビリティは変わらず求められるものです。Web/IT業界では「使いやすさ」という意味で気軽に使われる言葉ですが、奥は深く、原論を解説した書籍もいくつか出ています。 学術的な解説はそういった書籍に任せるとして、ここでは、経験の浅いデザイナー、あるいは非デザイナー（ディレクター、Web担当者、エンジニアなど）向けに、ユーザビリティの向上に繋がる基本的な要点をまとめてみました。 ボタン、テキスト、コピーなど ボタンやテキストのデザインは、ユーザビリティを左右する大きなポイントです。表面的な美観に流されず、ユーザ視点で考えていきましょう。 1：ボタンじゃない要素は、ボタンと似たデザインにしない ボタンのデザイン次第で、サイトやアプリの使いやすさは大きく変わります。特に、ボタンでない要素にボタンのようなデザインを施すことは、どこが押せるの
切れないハサミと使えないWebデザイン | ベイジの社長ブログ
本エントリーは、以下の目次で構成されています。 2種類のハサミと2種類のWebデザイナー Webデザインの特殊性 ビジュアルのディテールに神が宿らないWebデザイン 美しいが使えないWebデザインをしてしまう理由 Webデザイナーを支配する「強固な固定観念」と「裏の動機」 美しいビジュアルの根底にあるデザインの本質 本当に「最近のWebデザインはつまらない」のか？ ミスマッチが生む不幸なWebデザイン Webデザイナーに求められる自らのスタンス Web制作会社にも求められる明確な価値観 2種類のハサミと2種類のWebデザイナー 例えば、以下のような2種類のハサミが存在するとします。 工芸品のように美しいが切れ味はよくないハサミ 見た目はそれなりだが非常によく切れるハサミ 1は、ハサミとしては売れないでしょう。ただ、それが刺激的で斬新なビジュアルであった場合には、特別な賞を取ったり、美術館に
ワンランク上のHTMLコーディングを行うための18のポイント | ベイジの社長ブログ
HTMLコーディングの初級というと、どの程度のスキルを差すのでしょうか。弊社では、以下のようなことがひとまずできていると、だいたい初級レベルを越え始めた段階かな、という気がしています。 ターゲットブラウザで大きな崩れがない。 リンク漏れや原稿違いなどのヒューマンエラーの頻度が極めて低い。 バリデーター・チェックでエラーが出ない。 逆に、これだけのことができて、なぜまだ初級レベルなのでしょうか。それは、現場では、これだけでは不十分だからです。ブラウザでひとまず正常に表示されるだけでなく、改修に素早く対応できる柔軟性、協業や運用後の更新を楽にするルールの一貫性や簡潔さ、HTMLの概念をきちんと踏まえた正しい構造設計なども、求められてくるからです。 そこでここでは、脱・初級者を目指す方のために、弊社内で行っているHTMLコーディングの、いわゆるエラーということ以外のチェックポイントを、まとめてみ
デザインに立体表現を取り入れるときのセオリー×6 | ベイジの社長ブログ
iOS7の登場で、フラットデザインへの関心はますます高まっていることでしょう。 ここではそんなトレンドは一切無視して、UIデザインにおける立体表現を行う上で、おさえておくべき大切なポイントをまとめてみました。これらをマスターして、時代に逆行するゴリッゴリの立体表現を行えるようになりましょう。 セオリー１：現実世界の「光源」の基本ルールを守る 唐突ですが、この2つのボタン、立体表現としてどちらが正しいと思いますか？ 左側、「A」のボタンには、以下のような光源の矛盾があります。 ボタン本体の影は、右下に付いている。つまり、光源は左上。 へこんだAの影は、右上に付いている。つまり、光源は右上。 ドロップシャドウは、真下に付いている。つまり、光源は真上。 一方のBは、すべての要素の影が、光源が上の表現になっています。つまり、正解はBです。そしてこれが、現実世界での「光源」（＝影）の基本ルールです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
