ベイジのウェブ制作ワークフロー2021年版（約100のタスクと解説） | knowledge / baigie
営業、受注、制作、納品、運用と、ウェブ制作の活動は長期に渡り、そのタスクの種類と量は膨大です。だからこそ、基本的なプロセスや使用するドキュメントなどを明確に定義しておかないと、サービスの品質が担当者により大きく変わることになります。 ベイジは社員がまだ5名の頃、各人に委ねた進め方によって以下のようなトラブルが頻発していました。 ミスが発生しても「次から気をつける」と精神論で終わらせてしまう 担当するディレクターやクリエイターによってタスクの抜け漏れが起きる 担当者それぞれが属人的な進め方をしてて品質が安定しない 役割が不明瞭なグレーゾーンのタスクが放置されてしまう 創造的な仕事の時間が、ルーチンや計画にないタスクに奪われてしまう 新しい社員が入る度に同じことを教えないといけない これら問題を解決するため、2014年頃からワークフローを整備するようになりました。ちなみに私が入社したのはこれ以
良質なデザインを作るため揃えるべき日本語フリーフォント10種類 - ベーコンさんの世界ブログ
フォント大好きデザイナーのベーコン（@dogdog464646）です！ 良質なデザインを作るには、良いフォントが欠かせません。 それでは、「良いデザイン」ってなんでしょう？ ちょっと頭に思い浮かべてみてください 例えば… ・かわいいデザイン？ ・お客さんが使いやすいデザイン？ ・意味が伝わりやすいデザイン？ こんな感じでしょうか？ じゃあ正解の発表です 正解は… 全部です！ というかデザインの正解は、状況によって変わるんですよね なので、状況によって変わる「いいデザイン」に対応するためには「たくさんの種類のフォント」が必要になります たくさんの種類のフォントで、表現の幅を広く持つことで、デザインを正解に導きやすくなります この記事はデザイナーだけではなく ・イラストレーター ・エンジニア ・ブロガー ・プレゼン資料を作っている人 ・学校やサークルでチラシを作る人 このような人たちに役立つ、
無料で商用利用可能な高クオリティ＆汎用性高めのアイコン素材集「ICON BOX」
「デザイナーの皆さんが、アイコン作りなどの単純作業をする時間を減らし、よりクリエイティブな作業にフォーカスできるように」という思いを込めて作られたアイコン素材集が「ICON BOX」です。PNGとSVGの2つのデータ形式でダウンロード可能で、線データを残した状態で提供されているため、無料で利用できるだけでなく各種アイコンの編集も自由に行えるようになっています。 商用無料のアイコン素材集｜ICON BOX https://iconbox.fun/ ICON BOXは「なるべくかぶらないタッチのもので、高クオリティかつ汎用性の高いもの」というテーマで作られており、すっきりしたデザインが特徴。 「高層ビルの無料アイコン」というアイコンをクリックすると…… こんな感じのページが開きます。 アイコンはPNGとSVGという2つの形式でダウンロード可能。SVGはパスデータ有りの状態なので、調整してニーズ
イラストが楽しいサイトのまとめ | バシャログ。
酔っ払ってガチャを回すと当たることがよくあるgamiです。 さて、最近は写真や映像を大きく使ってるサイトをよく見かけますがイラストもいいぞ。というわけでイラストが楽しいサイトを厳選しました。チェケラ！ おかもと歯科 歯科に限らず医院系のサイトは清潔感のある院内写真や診察風景などを載せます。 このサイトではコーラルピンクを基調とした口のイラストのアニメーションで優しさ、親しみやすさが感じられます。ロゴがかわいい。 FESSIダンススクール ダンスの写真・映像は映えます。ドカンと乗せれば画面も持ちますしインパクトがあります。 しかし優しいイラストのアニメーションを用いることで暖かさが感じられとっつきやすさも出てくるのではないでしょうか？ もう片方もマウスオンで動きますのでぜひサイトにてチェックしてみてください。 イベントスタジオ イベントと一言いっても音楽フェスや展覧会、トークセッションなど幅
ウェブデザインの本質に主眼を置いたデザインガイドライン「ブルータリスト・ウェブ・デザイン」
by Igor Miske 建築形式のひとつである「ブルータリズム」を基に、ウェブサイト本来のあるべき姿に焦点を当てて作られたデザイン手法が「Brutalist Web Design(ブルータリスト・ウェブ・デザイン)」です。「雑誌ではないが雑誌のような記事が載っている」「アプリケーションではないが商品の購入やユーザーとのやり取りに使える」「データベースではないが、データベースによって動く」といった複数の側面を持っているのがウェブサイトであり、サイト訪問者に対してコンテンツを純粋に楽しむための方法として提供されるものであるとして、ブルータリスト・ウェブ・デザインは構築されたとのこと。そんなブルータリスト・ウェブ・デザインのガイドラインを、エンジニアのデイビッド・コープランドさんが記しています。 Brutalist Web Design https://brutalist-web.desig
実例で学ぶウェブデザイン！参考にしたい最新スタイル見本厳選50個まとめ
これからウェブサイト制作を行うひとが確認したい、創造力を高める最新ウェブデザインをまとめてご紹介します。さまざまな優れた実例サンプルを見ることで、デザイン案件のアイデアにも活用できます。 レイアウトや配色、フォント選びなどに加えて、最近ではアニメーションを有効活用したウェブデザインをさまざまな業種で見かけるようになっています。これからサイトを作成しようというひとや、打ち合わせでのきっかけ作りなどに活用してみてはいかがでしょう。 Webデザインのアイデア満載！創造力をアップさせる最新サイト50選 2018年に流行しそうな、注目Webデザイントレンド20個を大予想 人を惹きつける美しいデザイン！参考にしたいウェブサイト厳選まとめ Keus 水平方向へページが遷移していくウェブサイトで、オンラインショップもブログもどれも同じレイアウト。 The Test Center by Volvo オンライ
WEBデザイナーを育ててきた私が駆け出しWEBデザイナーに言いたい事。考え込むよりも手を動かさなきゃ。 | ホームページ制作・大阪 インフォメーションメディアデザイン株式会社
WEBサイト制作 2015.11.24 WEBデザイナーを育ててきた私が駆け出しWEBデザイナーに言いたい事。考え込むよりも手を動かさなきゃ。 I.M.Dでは積極的にWEBデザイナーを育てる取り組みを行っております。 今は直接指導をする立場ではなくなりましたが、私も10年前はデザイナーの育成に尽力をしておりました。 その時を振り返って思う事があったので紹介したいと思います。 デザインプロセスがないとデザインを教えるのはすごく大変なんです 後輩が作ったデザインにアドバイスをする際、「プロセスを見せて」って尋ねるんですが、そのプロセスがないって事がしばしばあります。 「えっTOP.psdしかないの」 「ここまで作るのに葛藤とか、迷いとかあるでしょ。その際に出来たTOP案AとかTOP案BとかはたまたTOP案B-1とかないの？」 「じゃいかにしてこのデザインにたどり着いたか分からないじゃないか」っ
検索 UI まとめてみた｜あき - 良いもの作って正しく届ける
検索 UI を作る機会があったので、リファンレンスを集めた。あたまの整理をかねてパターン分け。 パターン一覧 1. フリーワード型 2. サジェスト型 3. グループ型 4. あとからフィルター型 5. 条件指定型 6. レコメンド型フリーワード型キーワードで検索。入力中に検索結果がリアルタイムに変わるものが多い。 良いところ シンプル。入力と同時に検索結果を表示できるので、最短で検索対象へたどり着ける。 イマイチ キーワードが間違っていると、対象へたどり着けないことがある。 感想 タスク管理やシンプルなファイル管理に多く採用されていた。 複雑な検索条件が不要。ユーザーが検索対象のキーワードを把握している場合に有効そう。見つける、というよりも、ショートカット的な役割に近い。サジェスト型キーワードを入力すると、検索候補が表示。 良いところ キーワードを正確に把握していなくても対象へたどり着け
デザイナーが注目したい！2018年の人気デザイントレンド厳選14個まとめ
2018年を半分を過ぎたところで、今年人気となっているデザイントレンドを確認するに絶好のタイミングと言えます。 今回は、2018年にウェブサイトやモバイルアプリのUIデザインで人気のトレンド動向をまとめてご紹介します。 コンテンツ目次 1. フルスクリーン背景イメージ 2. カスタム・デジタルイラスト 4. キャラクターを使ったストーリーテリング 5. 分割スプリットスクリーン 6. 大胆なタイポグラフィー 7. ボタンのないUIデザイン 8. 鮮やかで大胆な配色 9. インターフェース向けアニメーションの採用 10. ランディングページ向けヒーローイメージ 11. ポスタースタイルのウェブページ 12. 実験的なカラーパレットとレイアウト 13. ユーザーエクスペリエンスのパーソナル化 14. 高品質な写真コンテンツ デザイナー要注目！2018年の人気デザイントレンド厳選まとめ 01.
無料で簡単にワイヤーフレームやフローチャートを作成できるWebサービス「Whimsical」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、ブラウザ上から誰でも効率よくワイヤーフレームやフローチャートを作成できる無料のWebサービスをご紹介します！ 可能な限り短時間で簡単に作成できるように工夫されているのが大きな特徴で、初めての人でも美しいワイヤーフレームを作って公開することが可能です。 【 Whimsical 】 ■「Whimsical」の使い方 それでは、実際に「Whimsical」を使いながらどのようなサービスなのかを見ていきましょう！ まずは、サイトにアクセスして「サインアップ」ボタンをクリックします。 （※Googleアカウントでも登録可能です） 無料のユーザー登録フォームが表示されるので、ユーザー名・メールアドレス・パスワードを入力しましょう！ すると、すぐに自分専用の「マイページ」が表示されます！ この画面から、新規にワイヤーフレームやフローチャートなどを作成
「Reboot.css」の特徴と使い方を解説
Bootstrapは既に多くの人が知っていると思います。 では、Bootstrapで採用されているCSSのリセットは知っていますか？ Reset CSSやNormalize.cssよりも使いやすく、これからのWebサイトやスマホアプリのCSSリセットとして設計された「Reboot.css」の特徴と使い方を紹介します。 A Look at Bootstrap 4's New Reset: Reboot.css 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Reboot.cssとは Reboot.cssの使い方 「box-sizing: border-box;」がどのように定義されているか remを使用したサイズとスペースの指定 ネイティブのフォントファミリー margin-topは死んでいる 共通要素はクリーンなスタイル タッチ
「とりあえずサイト作ってぇ〜」と依頼する前に必ず押さえるべき5つのポイント｜矢作裕之@ベンチャーやってます｜note
結論だけ見たい方はこちらをどうぞ。 ↓↓↓↓↓↓↓↓↓↓↓ 「とりあえずサイト作ってぇ〜」と依頼する前に押さえるべきポイントは ・サイトの目的を整理する ・参考サイトを準備する ・編集・変更箇所を明確にする ・適正価格を理解する ・サポート契約を視野に入れる です。 ------------------------------ ※いいねと思ったら是非FBやTwitter・はてブでシェアお願いします！！！ 自分は現在フリーランスのデザイナー兼エンジニアとして活動しており、Web制作やらアプリ開発なりをしています。 ありがたいことに、紹介で開発のお仕事いただくのですが、 「とりあえず会社のホームページ作ってぇ〜」 といったノリで打ち合わせが始まることが多々あります。 これを通称「とりあえず作ってぇ〜」型案件と（私は）呼びます。 こちらで要件の調整などコンサル込みで制作を進めることもできるのです
商用のデザインやイラストにも無料でガンガン使える！超高解像のフリーテクスチャ素材 -CC0 Textures
商用でも無料で利用できる2,000px, 4,000px, 8,000pxの超高解像度のテクスチャ素材がダウンロードできるCC0 Texturesを紹介します。 8,000pxまで揃ってるフリーテクスチャは、かなり貴重ですね。 しかもライセンスはCC0、クレジット表記なしで利用できます。 CC0 Textures CC0 Texturesの特徴 CC0 Texturesでは、無料で利用できるテクスチャ素材がダウンロードできます。ライセンスはCC0で、クレジット表記の必要はありません。また、サインアップやメールアドレス登録などの面倒なことも一切不要です。 PBR(フィジカルベースドレンダリング)ベースの素材 テクスチャは物理ベースのレンダリングで作成されており、シームレスで利用できます。 超高解像度のテクスチャ素材 ダウンロードできる素材は、2,000px, 4,000px, 8,000px
かなりオススメ！WordPressのローカル環境が簡単に構築できる、Windowsもmac OSも対応の無料ツール -Local | コリス
WordPressのローカル環境を構築するといえば、XAMPPやInstant WordPressを利用している人が多いと思いますが、これらより簡単に、そして一度のインストールで複数の環境を構築でき、PHPなどのバージョンも簡単に変更することができる高性能な無料ツールを紹介します。 サーバーの知識がない人でも簡単に利用でき、あっという間にWordPressのローカル環境が構築できます。 UIも洗練されて使いやすく、かなりオススメです！ ローカルに、WordPressの制作環境を簡単に構築できます。 WordPressの制作環境は、複数構築できます。 サーバーの知識がない人でも、4クリックするだけでOK。 WordPress日本語版にも対応。 ローカルSSLサポート。 SSH/WP-CLIアクセス。 共有可能なURLを作成して、クライアントに見せることも可能。 柔軟な環境オプション。 PHP
スクロール途中でグローバルナビをページ上部に固定・解除する方法
サイトの動線の要であるグローバルナビ。 グローバルナビを最初からページ上部に固定する場合には、単純にスタイルシートで「position: fixed;」を指定するだけで実現できます。 しかし、ヘッダーが大きい場合やスライドショー下にナビゲーションが来るデザインの時は、最初から固定しておくのではなく、スクロールの途中でページ上部に固定・解除を切り替えたいですよね。 そんな時は、jQueryを使うと実現できます。 ここでは、jQueryを使ったスクロールナビの固定・解除の方法を紹介していきます。 スクロール途中で固定・解除を実現するための原理 原理、というと難しい響きですが、その内容はとてもシンプルで簡単です。 javascriptでは、スクロールイベントが起きた時に走る関数である「.scroll()」があります。 そのイベントが起きた時に、現在のスクロール量とスクロール固定を始める位置を条件
Web業界とEC業界はまったく違う――そのギャップがEC事業者と制作会社の仲を悪くしている？ | 初代編集長ブログ―安田英久
2015年最初の記事は、「Web業界」と「EC業界」の違いについて。この2つの業界がどのように違うのか、中心となるマインドの違いと、さらそこから「EC事業者と制作会社は仲が悪い」という点について、少し考えてみます。 明けましておめでとうございます。 2015年は、「Web業界とEC業界のギャップを埋める」ことを進めてみようかと思っています。 というのも、年明けに、こんな記事がありました。 Web業界からEC業界に行ってブチ当たった、皆が教えてくれない「EC業界の見えない壁」の正体を、もやっと掴めましたまた、それを受けて小川さんも記事をアップしています。 「Web業界からEC業界に行ってブチ当たった、皆が教えてくれない「EC業界の見えない壁」の正体を、もやっと掴めました！」を読んで（次回ミーティングのために）整理してみましたどちらもタイトルが長くてアレですが、要は「Web業界とEC業界って違
ECサイトに使える無料素材集11選 - Welcart カスタマイズ
ツイート B! ブックマーク Google+ Pocket Facebook ECサイトを自前で作っているからと言って、いちいちアイコンやバナーまで全て自前で作っていたら時間が足りません。 そこで便利なのが、今や簡単にダウンロード出来る、無料素材。私も自分のWelcartショップでお世話になっています。 使わせて頂いた感謝も込めて、無料素材のサイトをご紹介。尚、ダウンロード前には必ず各サイトの利用規約をご覧の上、ルールを守った上でご利用下さい。 ECサイト用素材 主にECサイトのカートボタンやアイコン、バナーの素材集。Webデザイナーさんが提供している素材サイトも多く、以下のサイトでは全て商用利用・加工可です。 E.Commerce予備校 http://ec-yobiko.com/ バナーが充実！！月に数回は更新されており、季節やイベントに関連したタイムリーなバナーを掲載。そのまま使えるも
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
驚くほど簡単！コーディング作業不要で、まざまなHTMLページを積み木感覚で作成できる無料ツール -Stitches
Fontello - icon fonts generator
Font Awesomeのアイコンを日本語でサクっと検索。Web制作の作業効率UP！
