うぇびん

ウェブおばさん。愛知県豊橋市のコーダー。アラフィフ道産子フリーランサー。2008年から…

うぇびん

ウェブおばさん。愛知県豊橋市のコーダー。アラフィフ道産子フリーランサー。2008年からフリーランス。コーディング全般、WordPressをはじめとする汎用CMSのカスタマイズ、ちょっとデザインもできます。

  • ウェブおばさんの即戦力講座

    ウェブおばさんの「うぇびんさん」が、これからウェブ制作者を目指す人向けに、即戦力として必要な知識、技術、考え方などを不定期で更新します。

  • CMSの考え方

    特定のCMS媒体に依存しない知識をまとめています。

数学が2だった私が、どのようにウェブ制作の勉強をしているのか

高校の頃の私は、勉強嫌いの文系でした（今もですが）。国語の成績は5段階で満点の5でしたが、数学は2、英語は3でした。 三角関数は今もわかりません。英語は中学英語レベルなら読めますが、会話は一切できません。 そんな私が、30年後の今ではウェブ制作の最新の技術・数種類のCMSのテーマ制作を習得し、PHP・JavaScriptも簡単なアプリを作成できる段階まで理解できています。50歳近くになった現在もReact・TypeScriptを勉強しているところです。 「勉強が嫌いなのに

うぇびん

    • CSSレイアウトパターン(5)要素をマス目状に敷き詰める

      「これだけは身に付けてほしい、6つのCSSレイアウトパターン」の詳細解説です。5つ目は一覧ページでの利用機会が多い「要素をマス目状に敷き詰める」です。「マス目状に敷き詰める」と表現しましたが、技術用語で「グリッド」と言います。 このパーツは、デザイントレンド、デザイン法則についても、少し解説する必要があります。また、敷き詰めている要素（この例では画像とボタンが付いたカード）の体裁にも気を配る必要が出てきます。 私の実務経験に基づいているので #この経験に学べ に参加してい

      うぇびん

      • なぜスクールへ行くの？SNSに網を張る「メンター詐欺」を見分ける方法

        あけましておめでとうございます。 今年は新しいことを始めたい、不安定な生活を変えたい！と、検索したりSNSを眺めている人も多いでしょう。そんな人たちが、2023年を無駄にしないためにこの記事を書いています。 メンター詐欺とは…というツイートをしているアカウントが、時折目に入ります。逃げ場がないLINE等へ誘導し、低いレベルの指導をしたり、質の悪い案件ばかりを紹介します。明確な名前はありませんが、私は「メンター詐欺」と呼んでいます。 明確な悪意を持って「教える方法を教える」

        うぇびん

        • ウェブ制作勉強中だけど「会社のホームページ作って」と言われたら

          先日Twitterで「ウェブ制作を勉強中だが、勤め先で業務外、無報酬で会社のホームページを作ってほしいと言われた」というツイートを見かけました。 「タダで or 安く作って」系はウェブ制作に限らずよくある問題です。 私は、頼まれているあなたと頼んできた上司との関係がわからないので、完全な回答を出すことができません。最善の手をどう考えるべきか、その道筋を書いていきます。 基本的に断る先ほどのツイートに対して「勉強になるから引き受ければいいのでは」とリプしている人がいましたが

          うぇびん

        数学が2だった私が、どのようにウェブ制作の勉強をしているのか

        うぇびん

        • CSSレイアウトパターン(5)要素をマス目状に敷き詰める

          うぇびん

        • なぜスクールへ行くの？SNSに網を張る「メンター詐欺」を見分ける方法

          うぇびん

        • ウェブ制作勉強中だけど「会社のホームページ作って」と言われたら

          うぇびん

        マガジン

        • ウェブおばさんの即戦力講座
          14本
        • CMSの考え方
          1本

        記事

          CSSレイアウトパターン(3)(4)左右の一方が固定、一方が可変

          「これだけは身に付けてほしい、6つのCSSレイアウトパターン」の詳細解説です。 3つ目（上揃え）と4つ目（上下中央揃え）は、利用シーンや注意点が異なりますが、CSSの書き方はほとんど変わらないのでまとめて解説します。 このパターンには2通りの作成方法があるのですが、この記事では初級・中級のウェブ制作者が比較的理解しやすい、flexboxを使用する方をご紹介します。 はじめての方はお読みください↓↓ サンプル実際にブラウザで見られるサンプルはこちらです。 上揃え 上下

          うぇびん

          CSSレイアウトパターン(3)(4)左右の一方が固定、一方が可変

          うぇびん

          確実にバフがかかる、ウェブ制作の案件ファイル整理

          ウェブ制作の現場では、様々な形式のファイルを大量に扱います。企画書のスプレッドシート、デザインカンプ用のPSD、Word原稿、実際に制作するHTML、請求書PDFなどなど… ウェブ制作のお仕事を始めたばかりだと管理しきれず、デスクトップがグッチャグチャになりがちです。 今回は、私が仕事のメインマシンの中で、案件のフォルダやファイルをどのように整理・管理しているかをご紹介します。私はMacユーザーですが、Windowsでもできることばかりです。 もしも、あなたがファイルを整理

          うぇびん

          確実にバフがかかる、ウェブ制作の案件ファイル整理

          うぇびん

          ウェブ制作でモメないための文章術：組み立て編

          私は子どもの頃から動揺しやすく、持病もあり、とっさに適切な発言ができないことがありました。そのせいで人生に関わる失敗を何度かしています。 ウェブ制作の仕事は基本的に、メッセンジャーやプロジェクト管理ツールでの、文章のやり取りになります。文章だと考えてから返事をしたり、編集ができます。この仕事のおかげで社会復帰して、治療を受ける余裕もできました。 ブログの方向性を変えたくないので前置きはこの辺にしますが、そんなこんなで、仕事の文章を書くときは慎重にしています。文章の書き方ひと

          うぇびん

          ウェブ制作でモメないための文章術：組み立て編

          うぇびん

          CSSレイアウトパターン(2)幅・高さ固定＋上下左右中央寄せ

          「これだけは身に付けてほしい、6つのCSSレイアウトパターン」の詳細解説です。2つ目はボタン等で多用する「幅・高さ固定＋上下左右中央寄せ」です。 はじめての方はお読みください↓↓ サンプル実際にブラウザで見られるサンプルはこちらです。 ページタイトル（高さのみを固定） ボタン（幅・高さの両方を固定） なぜかわかりませんがカーソルを置いたときの効果が反映されません。枠の下の表示倍率を 0.5x にしてください。 基本的な挙動タブレットの画面幅（640px・768px

          うぇびん

          CSSレイアウトパターン(2)幅・高さ固定＋上下左右中央寄せ

          うぇびん

          CSSレイアウトパターン(1)最大幅を制限して中央寄せ

          「これだけは身に付けてほしい、6つのCSSレイアウトパターン」の詳細解説です。1つ目はすべてのレイアウトの基本である「最大幅を制限して中央寄せ」です。 はじめての方はお読みください↓↓ サンプル実際にブラウザで見られるサンプルはこちらです。 基本的な挙動特に指示がなかったり、おまかせ or 自分がデザイナーであれば、以下のような挙動が基本です。 スマートフォンでは、スマートフォン用のカンプの左右余白を確保して画面いっぱいに広げる タブレット縦（640px以上、768

          うぇびん

          CSSレイアウトパターン(1)最大幅を制限して中央寄せ

          うぇびん

          ウェブ制作で月30万稼ぐ、とは。収益を出すために考えていること

          制作会社に入らずフリーランスのウェブ制作者になりたい、という人が一番気になるのがお金の話ではないでしょうか。 巷では「ウェブ制作で月30万！」などというキャッチも見かけます。ウェブ制作を仕事にするために考えていること、知っておいてほしいことを書きます。 後半で私の今年（2022年1月〜11月）の売上の話も出てきますが、後述の個人的な事情で、同世代ではかなり売上が少ない状況です。それだけに「稼ぐ」ことの本質を説明できるかなと思います。 はじめての方はお読みください↓↓ ラ

          うぇびん

          ウェブ制作で月30万稼ぐ、とは。収益を出すために考えていること

          うぇびん

          「ウェブおばさんの即戦力講座」について

          はじめての方は、こんにちは！ すでに私をご存じの方は、毎度ありがとうございます。 愛知県豊橋市でフリーランスのウェブ制作業をしている、ウェブおばさんの「うぇびん」です。 数年前までは、勉強会の主催、セミナーイベントの実行委員などで、ウェブ業界の情報共有に関わってきました…が、コロナ禍でお休みしている間に、きな臭い話を聞くようになりました。 「月○○万稼ぐ」ことを第一とした、非常にレベルが低いセミナービジネスの話です。 ウェブ業界は既に建築や印刷と同じ、インフラ業界となって

          うぇびん

          「ウェブおばさんの即戦力講座」について

          うぇびん

          これだけは身に付けてほしい、6つのCSSレイアウトパターン

          ウェブデザイナーとして現場でコーディング業務をするまでに、これだけはきちんと書けるようになっていてほしい、6つのレイアウトパターンを優先度順に紹介します。 各パターンの解説も順次公開しますので、書いたらリンクを追加します。そちらではCSSの書き方だけではなく、どのようなパーツに使うのか、設計上の注意点、デザイナーに聞いておくべきことなども解説する予定です。 ※ここでは初学者向けに単位をpxにしていますが、PC、モバイルとも柔軟に表示できるよう、remや%やvwを使用するこ

          うぇびん

          これだけは身に付けてほしい、6つのCSSレイアウトパターン

          うぇびん

          ウェブ制作の学習で #今日の積み上げ を多用するのが危ない理由

          「今日の積み上げ」というのは、毎日何をするか宣言することで、習慣化を即す学習法というか、ライフハックのようです。 ウェブ制作を勉強している人でも多用している人をよく見かけますが あれを使い続けるのは、まずいです。 ヤバいです。 危ないです。 あなたは本当に頑張っています。なのであなたそのものをdisる目的ではないとご理解ください。 何が危ないのかを書いておきます。 これを読んだうえで、それでも大丈夫というのでしたら、あなたに合っている学習法でしょうから止めません。

          うぇびん

          ウェブ制作の学習で #今日の積み上げ を多用するのが危ない理由

          うぇびん

          これからウェブ制作者になりたい人に、技術以外のことを伝えたいのだ、私はっ

          「#今日の積み上げ」「#駆け出しエンジニアと繋がりたい」というハッシュタグをよく見かけます。コロナ禍で先行きが不安になる中、自由な生き方を求めてウェブ制作者を目指す人が増えているようです。 「エンジニアになった、という既成事実だけ作ってそのノウハウを売る」という層がいることも把握しています。ですが、本気で現状を変えようと勉強している人たちも少なくないでしょう。そういう人たちに「先輩フリーランサー」として伝えたいことが溜まってきたので、放置していたnoteを開けました。 伝

          うぇびん

          これからウェブ制作者になりたい人に、技術以外のことを伝えたいのだ、私はっ

          うぇびん

          導入サイトの見積に必要な情報

          多くの制作会社さんとCMS案件に関わってきて、ずいぶんになります。 三年ほど前「特定のCMS媒体に依存しない知識」をYouTubeで配信しようとしてお蔵入りになったことがありました。動画にするにはあまりにつまらない内容だったからです。 それを改めて起こし直し、noteで配信したいと思います。内容によっては有料記事となるかもしれませんが、初回は無料で公開します。 特定のCMS媒体に依存しない知識とは、例えば「2020年WordPressの高クォリティテーマ10選」といった、

          うぇびん

          導入サイトの見積に必要な情報

          うぇびん