ベイジのウェブ制作ワークフロー2021年版（約100のタスクと解説） | knowledge / baigie
営業、受注、制作、納品、運用と、ウェブ制作の活動は長期に渡り、そのタスクの種類と量は膨大です。だからこそ、基本的なプロセスや使用するドキュメントなどを明確に定義しておかないと、サービスの品質が担当者により大きく変わることになります。 ベイジは社員がまだ5名の頃、各人に委ねた進め方によって以下のようなトラブルが頻発していました。 ミスが発生しても「次から気をつける」と精神論で終わらせてしまう 担当するディレクターやクリエイターによってタスクの抜け漏れが起きる 担当者それぞれが属人的な進め方をしてて品質が安定しない 役割が不明瞭なグレーゾーンのタスクが放置されてしまう 創造的な仕事の時間が、ルーチンや計画にないタスクに奪われてしまう 新しい社員が入る度に同じことを教えないといけない これら問題を解決するため、2014年頃からワークフローを整備するようになりました。ちなみに私が入社したのはこれ以
今風に作られたスライド式サイドバーのコードスニペット9選 - Workship MAGAZINE(ワークシップマガジン)
かつてナビゲーションメニューは、画面の上部や左右に固定されていました。しかしモバイル端末が進化した現代は、ハンバーガーメニューとスライド式サイドバーが主流の時代です。 もちろんハンバーガーメニューやスライド式サイドバーは、モバイル端末専用の存在ではありません。PCの画面においても、メニューを隠しておくことでより広くスペースを活用できます。 今回は2019年最新の、モダンなデザインのスライド式サイドバーを9つご紹介します。ユニークなアイデアに基づいたサイドバーを、ぜひ参考にしてみてください。 1. Sidebar template Azouaoui Mohamedによるサイドバーテンプレートは、ロゴタイプからソーシャルメディアアイコン、検索ボックスまで、必要なものをすべて備えています。 モバイルにもデスクトップにも合うフレキシブルなデザインが魅力。強力なワークフレームであるBootstrap
Webデザイナーにおすすめ！ページ全体のスクリーンショットを撮れる拡張機能3選
僕はデザインが優れていると思ったWebサイトのスクリーンショットをコレクションしています。 コレクションしたスクリーンショットを見てデザインを勉強したり、Webサイトをデザインする際の参考にしたりしています。 基本的にはChromeの拡張機能でスクリーンショットを撮影しています。 色々な拡張機能を試した結果、オススメの拡張機能を紹介します。 スクリーンショット撮影に必要な3つの機能 僕の目的はWebサイトのデザインをコレクションすることです。 そのために必要だと思っている機能が3つあります。 ページ全体のスクリーンショットを撮影できる デザインの勉強や参考に使うために、ページ全体のスクリーンショットを保存しています。 Webサイトのデザインは流動的です。 リニューアルや閉鎖などで、そのデザインとは二度と出会えない可能性もあります。 ページ全体をスクリーンショットしておけば、そのような場合で
ランディングページのデザインまとめサイト11選！デザインを作る際のポイントとは | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、マーケターのまこりーぬです。 Webサイトのランディングページを作成することになったけど、どのようなデザインにしたらよいのかさっぱりわからん……と悩んでいる方も多いのではないでしょうか？ この記事では、Web制作担当者向けに、ランディングページとはなにか、デザイン作る際の注意点やおすすめのデザインのまとめサイトを紹介します！ ランディングページとは ランディングページ（LP）とは、ユーザーが広告・外部サイトなどをクリックした際に、一番最初に訪れるページのことです。一般的には縦長の1枚構成になっています。 ランディングページの役割 ランディングページの役割は、ユーザーに、自社の商品やサービスへの関心を持たせ、商品購入や問い合わせといったコンバージョン（結果）を引き出すことです。ユーザーを他のページに移動させないために、1ページ中に情報を集約する、イメージ画像を多用する、情報を提示
【プロ直伝】ロゴ作りの8つのコツをわかりやすく事例解説！ | ベーコンさんの世界ブログ
デザイナーのベーコン（@dogdog464646）です この記事ではロゴやタイトル文字の作り方を説明していきます 初心者でもこれだけ押さえれば、まるでプロの作ったようなロゴを作ることができます このテクニックを応用していけば、「どうやって作るんだ！」と思っていた複雑なロゴも作れるようになっていくはずです ロゴだけじゃなくて、 ・本の表紙 ・ブログのアイキャッチ ・チラシ、ポスターのタイトル文字 にも応用できるようになっています 覚えておけば、仕事の資料作りにも、PTAのチラシづくりにも役立ちます そして、みなさんが再現できるようにフリーフォント限定でデザインを作っていきます！ ロゴを作るテクニック！ 実際にロゴを作りながら、様々なテクニックを紹介していきます 基本の形を整える この文字を基本に進めますね まず２行にして「かたまり感」を出していきましょう ロゴは「文字」から「絵」に変えるよう
良質なデザインを作るため揃えるべき日本語フリーフォント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
ECサイトに使える無料素材集11選 - Welcart カスタマイズ
ツイート B! ブックマーク Google+ Pocket Facebook ECサイトを自前で作っているからと言って、いちいちアイコンやバナーまで全て自前で作っていたら時間が足りません。 そこで便利なのが、今や簡単にダウンロード出来る、無料素材。私も自分のWelcartショップでお世話になっています。 使わせて頂いた感謝も込めて、無料素材のサイトをご紹介。尚、ダウンロード前には必ず各サイトの利用規約をご覧の上、ルールを守った上でご利用下さい。 ECサイト用素材 主にECサイトのカートボタンやアイコン、バナーの素材集。Webデザイナーさんが提供している素材サイトも多く、以下のサイトでは全て商用利用・加工可です。 E.Commerce予備校 http://ec-yobiko.com/ バナーが充実！！月に数回は更新されており、季節やイベントに関連したタイムリーなバナーを掲載。そのまま使えるも
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ワードプレステーマTCD
『ノンデザイナーズ・デザインブック[第4版](Robin Williams：著)』の要約と感想をまとめたよ！ | ヨシ社長のブログ｜バリ島の貿易会社』の要約と感想をまとめたよ！ | ヨシ社長のブログ｜バリ島の貿易会社](https://cdn-ak-scissors.b.st-hatena.com/image/square/72e227380e80fcbc895fbeda4a99d19fb2faf571/height=288;version=1;width=512/https%3A%2F%2Fwww.pt-jepun.com%2Fwp-content%2Fuploads%2F1997_design-book01.jpg)
