アラフォーから始めるWEBデザイナー

現場で役立つ技術ポイント

http://webdesigner40.com/2020/06/18/seo-html/ http://webdesigner40.com/2020/06/12/html-head-tag/ http://webdesigner40.com/2020/05/15/css-float-howtouse/ http

2020/06/29 10:20

SEO対策としてHTMLのタグ設定を理解する！効果的な4つの方法

HTML記述がSEOに影響を及ぼすことをご存じですか？正しい記述方法を知っていますか？学習を始めたばかりの人は特に、表示にばかり気を取られ、W3CやGoogleが推奨しているHTMLの記述方法をあまり気にしていない人も多いはず！それほど難しくなく、すぐにでも対応できる内容なので、まとめて説明しました。

2020/06/18 22:22

headタグ内に記述必須のタグを紹介！！SEO対策や表示にも影響する重要事項

コーディングの学習をしていて、どうしても後回しにしがちなのがheadタグ内のコード。しかし実はとても重要な内容を記述する部分で、SEOにも影響を及ぼすものでもあるのでしっかりと覚えておきたいところです。この記事で解決する内容headタグ内に

2020/06/12 17:34

Webデザイナーに独学でなる学習の流れとポイント！！失敗しない・挫折しない独学法！

Webデザイナーになりたいけど、「何から学習して良いかわからない」「お金はかけられないけど独学でなれるの？」そんな悩みを解決します！独学でもWebデザイナーになるためには学習の流れやポイントを押さえることが大切！！失敗しない独学方法を伝授します！

2020/06/05 13:31

初心者が覚えておくべきhtmlタグを紹介！これだけ覚えればサイトの構造は作成できます！！

「Webデザイナーの学習をなにからはじめたらいいかわからない」「htmlってなに」そんな悩みを抱えている方に、まず初めに学ぶ必要のあるhtmlタグを説明します。これからのタグを覚えればほとんどのサイトの構造は作成することができます。

2020/06/01 10:00

5分でわかる！CSSのfloatプロパティの使い方を仕組みから教えます！！

floatを使うと「レイアウトが崩れてしまう！」「思ったようなレイアウトにならない！」などCSSでつまづくポイントでもあるfloat。図解を使用して一から説明していますので、簡単に理解できます！！ので是非一読下さい！！

2020/05/15 09:34

新しい横並びレイアウトのプロパティFlexboxを身につけて他のWEBデザイナーに差をつける！！

横並びレイアウトを行うCSSプロパティのフレックスボックス。今後スタンダードになるこの技術を一から丁寧に説明していきます。

2020/05/08 22:09

脱初心者！inline-blockで行う横並びレイアウトでレスポンシブにも対応

「CSSでの横並びが上手くできない」「どこが間違っているのかわからない」と言う方に、丁寧にdisplayのinline-blockを説明した記事になっています。この記事を読めば超初心者でも横並びのレイアウトを表現することが出来ます。

2020/05/08 17:30

現場で使える！！CSSで行う背景画像の設定方法

「背景が上手く設置できない」「スマホ画面で背景が切れてしまう」などCSSでの背景画像の設定に困っている方は、この記事を読めばどんな背景画像でもレスポンシブで対応することが可能になります。実際の現場でも使われている手法なので是非覚えて下さい！

2020/04/25 15:35

フォントの種類がわからない！時の確認方法♪

WEBデザイナーをやっていると修正作業はかなりの頻度であります！コーディング作業を依頼された時にイラレやフォトショでデザインデータをもらい、それを基にコーディングをしていくのですが、初めの頃に困ったのはテキスト内容の修正。コーディングを行っ

2020/01/03 16:03

動画から画像を切り取る！！ Photoshopで簡単♪サムネイル画像作り

最近ではスマホで簡単に動画を撮影することができ、それをホームページなどにアップすることもあるかと思います。その際にリンクの元となる画像を貼り付け設置する場合、その画像はどこからとってくるのか？Youtubeなどにアップする時には、動画から自

2019/12/16 19:48

仕事獲得 ～仕事探しの準備と方法～

2019/12/11 16:24

未経験でもOK？！ポートフォリオで仕事をGET♫

ウェブデザイナーで仕事を得ようと考えた時に、必ずといっていいほど求められるポートフォリオ。しかし、経験のない人にとってはポートフォリオの準備はどうしたらいいかわからない、なんて人も多いと思います。逆を言えばよいポートフォリオが作成できれば、

2019/12/11 16:21

SEO対策のマル秘手法、本当は教えたくない裏技！

SEO対策に裏技なんてあるんでしょうか？クローラーの精度が上がってコンテンツの内容に重点が置かれるようになったため、地道なサイトの質の向上しか順位アップへの道がないように思われます。裏技や即効性をアピールするSEO関連の記事や会社は中には胡

2019/12/10 14:34

SEO対策初心者でも簡単！記事の書き方5つのポイント

SEO対策において、勉強を始めたばかりでもすぐ実行できることはmetaタグなどheadタグ内の記述と、記事の書き方の工夫です。この2つはサイト制作のことをあまり知らなくてもできることですので、SEO対策初心者でどこから勉強すれば良いか分から

2019/12/07 21:09

SEO対策の手法！初心者が押さえておきたい基本中の基本

SEO対策の基本的な手法をどこまで知っていますか？まず、外部対策と内部対策があることは常識として知っておきましょう。一昔前のSEO対策といえば、ほとんど外部対策でした。適当なリンクサイトを大量に作成し、被リンク100個x万円！というSEO会

2019/12/05 22:29

SEO対策PDCA別おすすめ無料ツールあれこれ

SEO対策は、施策を行って「はい、終わり！」とはなりません。何度も対策と結果の評価を行いより上位を狙う、またはライバルサイトに順位を抜かされたりしないよう努力を重ねていかなくてはいけません。まさにPDCAサイクルを意識してすべき仕事です。S

2019/12/02 11:49

SEO対策！私がやっていたキーワード選定方法

SEO対策のまず第一歩はキーワードの選定です。簡単なように見えますが、この選定がSEO対策の成功の鍵を握っています。 私が実際にキーワードを選定する時にやっていたこと、気をつけていたこと、そして便利なツールをご紹介いたします。 とにかく沢

2019/12/01 20:35

TECH::EXPERTの魅力！メリット・デメリットを紹介！！

今回はあの堀江貴文さんも絶賛しているエンジニアスクール「TECH::EXPERT」の中身をご紹介していきます！！TECH::EXPERTはフロントエンドからサーバーサイドの技術まで、幅広い学習を行うため、学習後の仕事の選択肢も広がります。学

2019/11/25 14:15

学習方法～準備から学習の手順～

2019/11/21 13:46

「学習方法（選択編）」

これから学習に入る人は、まずは学習方法を選択していきます。迷うところですね。準備編にある機器やソフトを準備できる人には、選択肢はいろいろありますが、ある程度費用が掛かるので、すぐに準備できない人もいるかもしれません。学習前にまずは貯金しない

2019/11/21 13:37

「準備（ソフト編）」

機器が準備出来たら次はソフト類。WEBデザイナーとして、また在宅ワークとして必要なソフトを紹介していきます。無料のものもたくさんありますので、自分に使いやすいものを見つけてもらいたいと思います。イラストレーター・フォトショップは必須！！これ

2019/11/18 20:24

「準備（機器編）」

まずは学習のための準備です。WEBデザイナーを目指すには少なからず初期費用が掛かります。パソコンなどの周辺機器やソフトなどなど。WEBデザイナーを目指す方に必要なモノやかかる費用などをまずは見ていきましょう！必要な機器WEBデザイナーを学習

2019/11/18 10:56

最新画像が表示されない？！Chromeでの対処法

コーディングを行っていて画像の置き換えを行ったとき、確かに置き換えたのに、ブラウザには過去の古いものが表示されている・・・そんなときの対処法です。Chromeはキャッシュが強い！！通常の再読み込み（リロード）は、アドレスバー横の↻のマークを

2019/11/17 22:17

FTPソフトを使用する！在宅ワークでは必須！！

FTPソフト・・・聞いたことはあるけど、よくわからない、使ったことがない方が多いのではないでしょうか？仕事以外がFTPを使うことはほとんどないと思いますが、Webデザイナーとして在宅ワークなどを行う方には必ず必要となります。ここでは細かな内

2019/10/22 21:35

グラデーションがカラーにならない！？

グラデーションはカラーを綺麗に見せる効果。こんな感じ！！でも初期設定だとグレースケールでカラーになっていません。変更するのは簡単♪グラデーションから赤丸部分どちらかをダブルクリックし、上記の表示が出たら右上のメニューバーを押すとドロップダウ

2019/10/22 21:21

白抜き文字はアピアランスを使用する！！

イラストレーターでデザインを行うときに、アピアランスの活用は必須！！ここではアピアランスの活用方法をご紹介していきます。まず初めに下の画像をご覧ください。上と下、同じ白抜き文字ですが下の文字は白抜き部分がかなり狭くなっています。逆に上の文字

2019/10/21 23:40

文字に背景画像を適用しよう！！

表題などインパクトを持たせたい文字にはデザインにもこだわりたい！！一つの方法として、色を変化させるだけではなく、画像を文字に適用させる方法があります。上の文字は海の画像を文字に提要したもの。色に変化を付けただけでは出せない、素敵な感じになっ

2019/10/14 20:42

図形の重なり部分の色を変える！！便利なライブペイントを使いこなそ～

今回行うのはこんな技術！！図形が重なっている部分の色を変えたいときに便利な機能がライブペイント！！これはパスファインダーの分割を使ってもできるんですけど、ライブペイントという便利な機能があるのでぜひ使ってください。まず図形を2つ作成。2つの

2019/10/14 20:39

display: inline-blockで横並びにした要素の隙間が埋まらない？

先日の仕事で、PC表示ではヘッダーに設置し、スマホでは下部に固定で横並びに設置するという内容があり、HTMLは<ul> <li>電話</li> <li>メール</li&g

2019/10/14 14:24

簡単作成♪立体的なボタンの作成

デザインをパソコンで行う上で立体的なデザインは一つの憧れ。でも、難しそう・・・まだまだスキルがないし・・・いやいや、簡単に作成できますよ！こんな感じに、どうです？それっぽくないですか！！ボタンなどをこんな感じで立体的にするだけで、デザイン性

2019/10/14 13:50

図形をモザイク状に色変更してカラフルなオブジェクトを作成しよう♪

今回はこんなオブジェクトを作成してみます！！図形をタイル状に色変更をできるようにします。まずは正方形を作成し、「オブジェクト」から「ラスタライズ」選択。次に「オブジェクト」から「モザイクオブジェクトを作成」を選んで、ダイアログボックスが出た

2019/10/13 22:25