ベイジのウェブ制作ワークフロー2021年版（約100のタスクと解説） | knowledge / baigie
営業、受注、制作、納品、運用と、ウェブ制作の活動は長期に渡り、そのタスクの種類と量は膨大です。だからこそ、基本的なプロセスや使用するドキュメントなどを明確に定義しておかないと、サービスの品質が担当者により大きく変わることになります。 ベイジは社員がまだ5名の頃、各人に委ねた進め方によって以下のようなトラブルが頻発していました。 ミスが発生しても「次から気をつける」と精神論で終わらせてしまう 担当するディレクターやクリエイターによってタスクの抜け漏れが起きる 担当者それぞれが属人的な進め方をしてて品質が安定しない 役割が不明瞭なグレーゾーンのタスクが放置されてしまう 創造的な仕事の時間が、ルーチンや計画にないタスクに奪われてしまう 新しい社員が入る度に同じことを教えないといけない これら問題を解決するため、2014年頃からワークフローを整備するようになりました。ちなみに私が入社したのはこれ以
動画をWebページの背景に埋め込む時のテクニック｜notes by SHARESL
Webページの背景に動画を埋め込む時のメモ 今回はWebページの背景に動画を埋め込む時に必要なテクニックをまとめてメモ。 TOPページのファーストビューに背景動画を設置したサイトをよく見かけますが、実際に実装することになると下記のような点で悩むことがあります。 埋め込み方法（<video>タグ、YouTubeやVimeoなどの外部サイトをiframeで埋め込み） 動画の容量による負荷の問題（サーバー負荷、ロード時間） 動画上のコントロールバーやタイトルなど不要な情報の表示 ループ再生 自動再生 ミュート再生 こういった点について、動画の埋め込み方法を紹介した上でメリット・デメリットを比較してまとめてみました。 動画の埋め込み方法の比較 この記事で紹介する背景動画の埋め込み方法は下記の4つです。 直接サーバー上のファイルを読み込む（videoタグ） Googleドライブのファイルを読み込む（
Web制作者必見！VSCodeのおすすめ拡張機能15個まとめ | Web Design Trends
VSCodeを使ってHTML/CSS/JavaScriptなどを使ったWeb制作、Webコーディングを行っている人も多いのではないでしょうか。 VSCodeは様々な拡張機能が公開されていて、それらを活用するとさらにWeb制作の作業効率が向上したり、使い勝手が良くなったりします。 今回は、Web制作者、WebコーダーにおすすめのVSCode拡張機能をご紹介したいと思います。 VSCodeとは VSCodeとは、Microsoftが提供するテキストエディタ「Visual Studio Code」のことです。つい数年前までは、人によって使っているテキストエディタが違うことも多かったのですが、最近ではVSCodeを使ってコーディングやプログラミングを行っている人がかなり多くなってきました。 VSCodeは、設定や拡張機能の追加など、マウス操作で行うことができ、初めてコーディングやプログラミングをす
無料で商用利用可能な和文フォント「IBM Plex Sans JP」をIBMがリリース
大手コンピューター関連企業のIBMが、無料で商用利用も可能なオープンソースの和文フォント「IBM Plex Sans JP」をリリースしました。太字でもつぶれにくく完成度も高いとのことで、実際にどんなフォントになっているのか確かめてみました。 IBM Plex Sans JP · GitHub https://github.com/IBM/plex/releases/tag/v5.2.1 やばいな〜。IBMがこの度公開した和文のゴシック体フォント「IBM Plex Sans JP」、完全にオープンソースなんだけど、独特のスミ取り処理とかでツブレにくく、これまでになかった表情があってオシャレ。 完成度高くておすすめですよ。https://t.co/wOs2vThCWL pic.twitter.com/IQ3Wau6Grz— トランプ (@t0kri) July 24, 2021 「IBM P
検索と向き合い続けて見えた〝泥臭いSEO論〟本数より大事なこと
情報発信の場が紙からデジタルに移り、「編集者」が担う仕事も多種多様になっています。新聞社や雑誌社、テレビ局などはウェブ上でも積極的な情報発信を始め、ウェブ発の人気媒体も多数登場しています。また、プラットフォームやEC企業がオリジナルコンテンツを制作する手法も一般的になりました。 広大なネットの海原で、どうやって読者にコンテンツを届ければよいのか？ その一つの手段として、WEB編集者が知っておくべきキーワードの1つがSEOです。過去には、SEOが悪用された事例もありましたが、検索エンジンは多くの人に記事を届ける重要なチャネルであることは今も変わりません。 Yahoo!ニュース、編集プロダクション・ノオトとの合同企画『WEB編集者の教科書』プロジェクトの第23回でお話を伺うのは、最新のWEBマーケティングに精通するウェブライダー代表の松尾茂起さん。日々アップデートされ続けるSEOの本質に迫りま
ExcelやGoogleスプレッドシートをMarkdown出力するVS Codeの拡張機能「Excel to Markdown table」が便利すぎる件 | DevelopersIO
Markdownでテーブルを表現するにはつらみが深すぎる みなさんはMarkdownでテーブルを書くことは得意ですか? 私は苦手です。 簡単なテーブルは簡単に書けるのですが、以下のようなテーブルを書くことには抵抗感があります。 行数、列数が多い セル内に書くテキスト量が多い セル内でリストを表現する 一方、私は先日、「Markdownで手順を書いています!」とこちらの記事で伝えました。 そんな私に対して、 「オイオイオイ。 Markdownでもなんでもいいけどよォ... テーブルを使いたい場面は多いんだぜ。」 というセリフが聞こえてくる気がします。 私のようなMarkdownでテーブルを書くことにつらみを覚える方への解決策として、以下記事で紹介している「MarkdownTableMaker」があります。 このアドオンを使うことで、選択したスプレッドシートをMarkdownに出力してくれます
[待望のアップデート] VSCodeの内蔵ターミナルがエディタと同様に扱えるようになりました！ | DevelopersIO
TL;DR まずはこいつをみてくれ。 左右に分割されたエディタウインドウに、テキストエディタとターミナルが並んでいるのがお分かりになられるでしょうか！！ なにそれ？ これは、先日リリースされた Version 1.58 (June 2021) に含まれる以下のアップデートによるものです。 Terminals in the editor area Terminals can now be created in or moved to the editor area, enabling a multi-dimensional grid layout that persists and remains visible regardless of panel state. Terminals in the editor area - Integrated Terminal - Visual Stu
CSSのみのボタンデザイン – 現場で使ってきたボタンアイデア30選 | BUILD Journal
Web制作の現場でよく使ってきたCSSのみで実装するボタンデザインを紹介します。hover時のスタイルも合わせて公開しているので、そのまま利用することができます。主に自分用のデザインストックとして投稿しますが皆さんも使えるボタンデザインがあるかもしれません。ぜひあなたの現場でもご活用ください。 背景色と矢印のボタン HTML<div class="button01"> <a href="">ボタンデザイン</a> </div> CSS.button01 a { display: flex; justify-content: space-between; align-items: center; margin: 0 auto; padding: 1em 2em; width: 300px; color: #333; font-size: 18px; font-weight: 700; bac
Let's Learn About Aspect Ratio In CSS
Having a consistent ratio between the width and height of images and other responsive elements is important. In CSS, we used the padding hack for many years, but now we have native aspect ratio support in CSS. In this article, I will discuss what is aspect ratio, how we used to do it, what’s the new way of doing it. Of course, there will be use cases with a proper fallback for them. Let’s dive in!
現場で使えるFlexboxレイアウト12選 | BUILD Journal
現場で使えるFlexboxレイアウト12選Update2023.05.12Release2021.06.24Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する 現場で使えるFlexboxレイアウトを12パターン紹介します。flexboxを紹介する記事はたくさんありますが、知識のみで実例付きで紹介されているページはあまり見かけなかったので、本記事にて詳しく紹介していきます。 flexboxに慣れていない方だけではなくコードを短縮化させたい方も対象の内容となっております。ぜひご一読ください。 flexboxを使った横並び1行レイアウトflexboxを使った横並び1行レイアウトカードUIでよくある横並び1行レイアウトのFlexbox実装。同じ横幅のカードを等間隔で配置するもので、間の余白ももちろん等間隔。これを使う機会は多いので確実
Tailwind CSS v2.2 - Tailwind CSS
Well I can’t say we were really planning on it but over the last few weeks we’ve been having a ton of fun dumping new and exciting features into Tailwind and now feels like the right time to cut a release, so here it is — Tailwind CSS v2.2! We’ve built-in a new high-performance CLI tool, added ::before and ::after support, introduced new peer-* variants for sibling styling, added variants for styl
色々書き比べた結果Tailwind CSSにしたという話 - Qiita
Twitterでこういう発言を見かけまして Tailwind CSSはデザインに凝ってるサイトでは使えない こだわりが無い場合に向いている は？何いってんの？ って思ったので、自分がいろいろ試した結果、Tailwind CSSを選んだ話を書きます。 はじめに 以前、Tailwind CSSは結構いいぞって話を書いたんですが、この記事の立ち位置的にはその続きみたいなものなので、以下の記事を始めにご参照いただけるとより分かりやすいかもしれないです。 この記事では、前回記事を書いた後、個人仕事でWebサイトをGatsbyで作り、その中で、どうやってCSSを書くのが良いのか模索した結果、自分はこれを選んだっていうのを、同じUIを色々な方法で書き比べたコードを並べつつ、どうのこうの筆者の考えを述べていきます。 その仕事はほとんど筆者が「まかせてくださいよーいい感じに作りますよー。デザインそろってない
CSS変数（カスタムプロパティ）の優れた使い方、コンポーネントのバリエーションを実装するのに役立つ
CSS変数（カスタムプロパティ）は、文字通りCSSで変数が使用できるので非常に便利です。CSS変数の使い方でよく聞くのはカラーですが、それ以外にもさまざまな優れた使い方があります。 WebサイトやスマホアプリのUIで、特にコンポーネントのバリエーションを実装するのに役立つCSS変数の使い方を紹介します。 Practical Use Cases For CSS Variables by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS変数を活用できてない例 CSS変数の優れた使い方 1: ロングハンドのプロパティ CSS変数の優れた使い方 2: 背景 CSS変数の優れた使い方 3: グラデーション CSS変数の優れた使い方 4: クリップパス CSS変数の優れた使い方 5: チェックボッ
あなたのWeb制作をサポートしてくれるWebツール13選 | BUILD Journal
あなたのWeb制作をサポートしてくれるWebツール13選Update2023.05.24Release2023.04.28Tools HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する Web制作をサポートしてくれるツールを10個紹介します。mix-blend-modeやgridレイアウト、transformなどのコードの他にもフォントチェックや背景画像を作成できるツール、VSCodeのテーマ作成ツールもあります。あなたのWeb制作を快適に進めるためにチェックしてみてください。 Fuze – CSS Gradient AnimatorFuzeグラデーションアニメーションのCSSジェネレーター。色を複数指定するだけでCSSアニメーション用のコードを作成してくれます。背景色やテキストカラーなどに使えます。 ちなみに、テキストカラーは当サイトのト
【HTML】知っておくと便利！短いHTMLコードで実装できる小技テク17選
この記事では、あまり知られていないHTMLの小技20個を実例サンプルと一緒にご紹介します。 CSSやJavaScriptなども使わずに、わずかなHTMLコードだけで実装可能な便利テクニックで、手軽に利用できるのもポイントです。 先日紹介したCSS小技テクと一緒に活用してみてはいかがでしょう。 【CSS】知っておくと便利！短いコードで実装できるCSS小技20選 たった1行のCSS！よく見かけるWebレイアウトを実現する凄技テクニック10個 そもそもHTMLってなに？ HTML（Hypertext Markup Language）は、Webブラウザで表示するための基本となる標準的なマークアップ言語です。また、CSS（Cascading Style Sheets）などの技術や、JavaScriptなどのスクリプト言語によってサポートされることもあります。 ホームページを作るときは、まずHTMLを
IE終了後にWeb制作の現場で使えるHTML&CSSコード14選！おさえておきたいコードを集めてみた | Pulp Note
マイクロソフトから正式にInternet Explorer 11 デスクトップアプリケーションのサポートを終了する発表がありました。期限は2022年6月15日です。Webサイト制作者としては歓喜の出来事ですね。 ただ、IEを気にしなくてもいいという事は、IE対応をしてきたコードの見直しも必要となります。そこで今回は、IE未対応で泣く泣くスルーしてきた即戦力なHTMLやCSSコードを14個紹介します。2022年6月以降のために今から知識を蓄えておいてはいかがでしょうか。 ちなみに、『Windows10 LTSC』や『Windows Server上のInternet Explorer11 デスクトップアプリケーション』といった一部のIE11には影響はないとの事ですが、一般ユーザーが利用する『Windows10のInternet Explorer』はサポート対象外となりますので、これはIE終了と
【CSS】知っておくと便利！短いコードで実装できるCSS小技20選
この記事では、あまり知られていないCSSの小技20個を実例サンプルと一緒にご紹介します。 わずかなコードで実装可能なテクニックばかりで、ウェブ制作でも気軽に活用することができます。 HTMLの小技テクと一緒に活用してみてはいかがでしょう。 【HTML】知っておくと便利！短いHTMLコードで実装できる小技テク17選 そもそもCSSってなに？ CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、HTMLなどのマークアップ言語で書かれた文書の表示方法を記述するためのスタイルシート言語です。CSSは、HTMLやJavaScriptと並んでWebの主要な技術です。 CSSは、レイアウトや配色、フォントなど、デザインとコンテンツを分別することを目的としています。これによって、コンテンツのアクセシビリティの向上、デザインの柔軟性やコンテンツの制御しやすさ、関連
Tailwind CSSのカスタマイズ方法を解説、基本的な機能を維持しつつ、スタイルを変更・追加するテクニック
Tailwind CSSはユーティリティクラスのフレームワークですが、すべてのスタイルは用意されていません。カラーを増やしたり、ブレイクポイントを増やしたり、マージンやパディングの値を増やしたり、カスタマイズ方法を紹介します。 また、Tailwind UIのUIコンポーネントをそのまま使用すると、似たデザインになってしまうことがあります。そんな時にもカスタマイズができると独自のデザインで実装できます。 Customizing Tailwind CSS by allround.io 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Tailwind CSSのカスタマイズの準備 スペースとブレークポイントをカスタマイズ ベースのスタイルを拡張 プリセットの使用と作成 終わりに はじめに Bootstrapの黄金期のように、T
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Top Free Headless CMS Platforms
WSL2とDockerとVSCodeのRemote Containersで最高の開発環境をつくる｜はやぶさの技術ノート
