マガジンのカバー画像

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

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

記事一覧

固定された記事
「ウェブおばさんの即戦力講座」について

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

はじめての方は、こんにちは!
すでに私をご存じの方は、毎度ありがとうございます。
愛知県豊橋市でフリーランスのウェブ制作業をしている、ウェブおばさんの「うぇびん」です。

数年前までは、勉強会の主催、セミナーイベントの実行委員などで、ウェブ業界の情報共有に関わってきました…が、コロナ禍でお休みしている間に、きな臭い話を聞くようになりました。
「月○○万稼ぐ」ことを第一とした、非常にレベルが低いセミ

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

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

高校の頃の私は、勉強嫌いの文系でした(今もですが)。国語の成績は5段階で満点の5でしたが、数学は2、英語は3でした。
三角関数は今もわかりません。英語は中学英語レベルなら読めますが、会話は一切できません。

そんな私が、30年後の今ではウェブ制作の最新の技術・数種類のCMSのテーマ制作を習得し、PHP・JavaScriptも簡単なアプリを作成できる段階まで理解できています。50歳近くになった現在も

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

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

「これだけは身に付けてほしい、6つのCSSレイアウトパターン」の詳細解説です。5つ目は一覧ページでの利用機会が多い「要素をマス目状に敷き詰める」です。「マス目状に敷き詰める」と表現しましたが、技術用語で「グリッド」と言います。

このパーツは、デザイントレンド、デザイン法則についても、少し解説する必要があります。また、敷き詰めている要素(この例では画像とボタンが付いたカード)の体裁にも気を配る必要

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

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

あけましておめでとうございます。
今年は新しいことを始めたい、不安定な生活を変えたい!と、検索したりSNSを眺めている人も多いでしょう。そんな人たちが、2023年を無駄にしないためにこの記事を書いています。

メンター詐欺とは…というツイートをしているアカウントが、時折目に入ります。逃げ場がないLINE等へ誘導し、低いレベルの指導をしたり、質の悪い案件ばかりを紹介します。明確な名前はありませんが、

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

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

先日Twitterで「ウェブ制作を勉強中だが、勤め先で業務外、無報酬で会社のホームページを作ってほしいと言われた」というツイートを見かけました。
「タダで or 安く作って」系はウェブ制作に限らずよくある問題です。

私は、頼まれているあなたと頼んできた上司との関係がわからないので、完全な回答を出すことができません。最善の手をどう考えるべきか、その道筋を書いていきます。

基本的に断る先ほどのツイ

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

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

「これだけは身に付けてほしい、6つのCSSレイアウトパターン」の詳細解説です。
3つ目(上揃え)と4つ目(上下中央揃え)は、利用シーンや注意点が異なりますが、CSSの書き方はほとんど変わらないのでまとめて解説します。

このパターンには2通りの作成方法があるのですが、この記事では初級・中級のウェブ制作者が比較的理解しやすい、flexboxを使用する方をご紹介します。

はじめての方はお読みください

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

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

ウェブ制作の現場では、様々な形式のファイルを大量に扱います。企画書のスプレッドシート、デザインカンプ用のPSD、Word原稿、実際に制作するHTML、請求書PDFなどなど…
ウェブ制作のお仕事を始めたばかりだと管理しきれず、デスクトップがグッチャグチャになりがちです。

今回は、私が仕事のメインマシンの中で、案件のフォルダやファイルをどのように整理・管理しているかをご紹介します。私はMacユーザー

もっとみる
ウェブ制作でモメないための文章術:組み立て編

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

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

ブログの方向性を変えたくないので前置きはこの辺にし

もっとみる
CSSレイアウトパターン(2)幅・高さ固定+上下左右中央寄せ

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

「これだけは身に付けてほしい、6つのCSSレイアウトパターン」の詳細解説です。2つ目はボタン等で多用する「幅・高さ固定+上下左右中央寄せ」です。

はじめての方はお読みください↓↓

サンプル実際にブラウザで見られるサンプルはこちらです。

ページタイトル(高さのみを固定)

ボタン(幅・高さの両方を固定)

なぜかわかりませんがカーソルを置いたときの効果が反映されません。枠の下の表示倍率を 0.

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

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

「これだけは身に付けてほしい、6つのCSSレイアウトパターン」の詳細解説です。1つ目はすべてのレイアウトの基本である「最大幅を制限して中央寄せ」です。

はじめての方はお読みください↓↓

サンプル実際にブラウザで見られるサンプルはこちらです。

基本的な挙動特に指示がなかったり、おまかせ or 自分がデザイナーであれば、以下のような挙動が基本です。

スマートフォンでは、スマートフォン用のカンプ

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

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

制作会社に入らずフリーランスのウェブ制作者になりたい、という人が一番気になるのがお金の話ではないでしょうか。
巷では「ウェブ制作で月30万!」などというキャッチも見かけます。ウェブ制作を仕事にするために考えていること、知っておいてほしいことを書きます。

後半で私の今年(2022年1月〜11月)の売上の話も出てきますが、後述の個人的な事情で、同世代ではかなり売上が少ない状況です。それだけに「稼ぐ」

もっとみる

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

ウェブデザイナーとして現場でコーディング業務をするまでに、これだけはきちんと書けるようになっていてほしい、6つのレイアウトパターンを優先度順に紹介します。

各パターンの解説も順次公開しますので、書いたらリンクを追加します。そちらではCSSの書き方だけではなく、どのようなパーツに使うのか、設計上の注意点、デザイナーに聞いておくべきことなども解説する予定です。

※ここでは初学者向けに単位をpxにし

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

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

「今日の積み上げ」というのは、毎日何をするか宣言することで、習慣化を即す学習法というか、ライフハックのようです。

ウェブ制作を勉強している人でも多用している人をよく見かけますが

あれを使い続けるのは、まずいです。
ヤバいです。
危ないです。

あなたは本当に頑張っています。なのであなたそのものをdisる目的ではないとご理解ください。

何が危ないのかを書いておきます。
これを読んだうえで、それ

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

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

「#今日の積み上げ」「#駆け出しエンジニアと繋がりたい」というハッシュタグをよく見かけます。コロナ禍で先行きが不安になる中、自由な生き方を求めてウェブ制作者を目指す人が増えているようです。

「エンジニアになった、という既成事実だけ作ってそのノウハウを売る」という層がいることも把握しています。ですが、本気で現状を変えようと勉強している人たちも少なくないでしょう。そういう人たちに「先輩フリーランサー

もっとみる