ウェブデザインを一緒に学ぼう2 必要な物は?

ウェブデザインに必要な物は何でしょうか?使う画像は?コードを書くツールは?プレビューはどうやって見るのでしょう?

更新日:2016年11月05日 09時00分

View:300

8f4749dc s

出典: pixlreditor.blog.jp

ウェブデザインでサイトやランディングページを作るのに必要なツール

出典: junonet.biz


ウェブデザインをするのに必要なツールは画像編集ソフト(PhotoshopやIllustrator)・コードを書くためのエディター・表示を確認するためのブラウザが最低必要になります。ここでは誰でも使うことが出来るサイトで画像編集をし、無料で使えるエディターやブラウザで進めて行こうと思います^^

サイトに使う画像は?

著作権は基本的に作者の死後50年間は著作権法によって保護されます。
(⇒著作権の保護期間)
保護期間が終了した著作物は法的な保護が消滅します。
著作権がなくなるので、著作物は誰もが自由にコピーしたり演奏したりできるようになります。
このような権利の消滅した著作物をパブリックドメインといいます。
(パブリックドメインという言葉自体は著作権以外にも知的財産権全般で使われます) 

出典: chosakuken-kouza.com

画像を使う時には注意が必要です。肖像権や著作権と言う法律がありますので、使う画像によって問題が起きる可能性があります。著作権フリーの画像でも、サイトに投稿している人が著作権のあるものを引っ張って来ている物も存在しますので、自分で練習に使うなら良いのですがウェブ・サイトとして公開する時は、問題のない画像を使うようにしましょう。

特に商用利用の場合は気をつけましょう。サイトによってはフリーでも商用利用出来ないところもありますので、どうしても使ってみたい時にはサイト管理者と連絡を取って利用料金を支払うと言う方法もあります。

またインターネット上には著作権を放棄された画像が存在します。これは自由に使えるので、ここから画像をゲットすると良いと思います。以下にリンクを貼っておきます。

画像編集に使うサイト

仕事であればPhotoshopやIllustratorを使うのですが、そうでない場合は1つのサイトを使って画像編集が出来ます。上記のソフトに比べると文字加工出来るツールが少ないのですが、画像加工には結構使えるサイトがあります。パソコンにインストールしなくても良いのでサクサク動きます。

その名は「pixlr editor」と言います。検索でも出て来ますがこの下にリンクを置いておきますね。使い方はまた別の記事に書くつもりですので、ここでは紹介だけにと止めたいと思います。

コードを編集出来る無料エディターは?

出典: liginc.co.jp


元々お使いのパソコンに入っているエディターでも使うことは出来ますが、ここでは無料で使えるツールをご紹介したいと思います。

筆者が使っているのは3つありますが、今回は2つをご紹介します。1つは「Sublime Text」もう1つは「Atom」です。どちらもカスタマイズして使いやすく出来ますので、お勧めのツールです。

サイトを確認出来るブラウザは?

出典: matome.naver.jp


これは実際どれでも見ることが出来ますがGoogleChromeを使って行きたいと思います。プラグインでカスタマイズも出来るし、スマホで見たサイトの確認が出来る物がありますので、ここではChromeを使って行きます。

PCサイトとスマホサイトでは、デザインが違いますしスマホサイトはユーザーの使いやすさを考慮する必要があります。PCのポインターと違って画面を指でタップしますので、使いやすく作る事を心がけましょう。ここで役立つのがGoogleChromeの機能です。これは別の記事で詳しく書きたいと思います。

まとめ

今回はウェブデザインで使うツールをご紹介しました。デザインを本格的に行いたいならPhotoshopやIllustratorが必要になります。これらの画像編集ソフトは機能が豊富で使いこなせば凄い作品が出来ます。

けどここでは基本的に無料の物を使って一緒にデザインを学んで行こうと思います。このシリーズの記事を見て興味が出てから画像編集ソフトの使い方を学んでも良いと思います。無料でも結構使える物なので、簡単なサイトを作るのに不自由はしないでしょう。もっと綺麗に作りたい場合は有料のソフトを使えば良いと思います。

更新日:2016年11月05日 09時00分

SNSシェアはこちら

このエントリーをはてなブックマークに追加

関連記事

今更だけどEXCELをはじめてみたい。(第4回)

EXCELを始めたいけどどうやって使っていいかわからない。 そんな方のためのページです。 今回は関数についてのお話です…

  • 流羽 海依
  • 217view

パソコンを初期化する前に【Windows】

パソコンの動きが悪く、初期化しようかなと検討することがあるとおもいますが、その際に気を付けておきたいことを、ご紹介します。

  • birdsinging
  • 712view

今更だけどEXCELをはじめてみたい。

EXCELを始めたいけどどうやって使っていいかわからない。 そんな方のためのページです。

  • 流羽 海依
  • 227view

【気をつけて!】SNSで話題の新手の詐欺が巧妙すぎる…

最近、日本で密かにブームになっている インターネットを使った「副業」 でもそんなブームを逆手に取った 新手の詐欺…

  • こーだい
  • 890view

【必見!】今更聞けない Twitterの仕組み!!

日本で使われているSNSといえば 「Twitter」「Facebook」「LINE」の3つです。 その中でも中高生など…

  • こーだい
  • 558view

ウェブデザインを一緒に学ぼう!1

筆者が現在学んでいる事の1つにウェブデザインがあります。これから少しずつ学びをシェアして行こうかなと思い立ちました。興味の…

  • ウェブライター天
  • 291view

無料ブログと独自ドメインブログの違いは?

無料ブログと独自ドメインで作るブログ、何がどう違っているのでしょう?どっちがお得なのでしょう?無料・独自ドメインブログそれ…

  • ウェブライター天
  • 300view

初心者必見☆無料で学べる!トレンドアフィエイトのノウハウ

GoogleAdSenseを使って稼ぐ方法を無料でゲットしませんか?初心者さんが結果を出しやすいネットビジネスの1つである…

  • ウェブライター天
  • 256view

パソコンが重くなった時の対処法は?

家にあるパソコンでいろいろな作業を行うと重くなったり固まって動かなかったりと、使えなくなる時があります。そんな時、自分でメ…

  • ウェブライター天
  • 546view

ライティングに役立つサイト&ツールは?読みやすい文章にする4つのコツ

ライティングをする時に文字数や校正ってどの様にしていますか?現役キュレーションライターが使っているサイトやツールをいくつか…

  • ウェブライター天
  • 428view

カテゴリーピックアップ

アクセスランキング

人気のあったまとめランキング

1

【ひまし油の驚きの効果】髪の育毛、顔のシミ、ほくろの除去、ダイエット...

ワクワク・ドキドキ♥編集室

2

【驚き!】ひまし油がすごい効果!

さくっちょ

3

【両性具有】どれくらいいるの?

さくっちょ

4

【ファン必見】コナンキャラの愛車たちがカッコいい!

意識高い系オタク★こぷろ

5

【深すぎる】ムーミン谷のミィの名言7選☆☆

リトル☆みっち

6

手作りを楽しもう 赤ちゃんの『 パンツ ・ ズボン 』

リク母

7

知ってた!?マックのコーヒー、お代わり出来るってよ

Yo-ichi

8

【びっくり!】”猿腕”と呼ばれる腕の実態

なおキングのブログ

9

【イマ流行!!】「ナイキ エア ハラチ」とは?

イタチ

10

【簡単!】1つの端末に2つLINEをインストールする方法~andro...

こーだい

ランキングをもっとみる

新着のまとめ

最新のトレンドを知るなら、ここをチェック

知り合ったばかりのデートで沈黙した時の話題7つ

恋愛研究室

今がチャンス!ビットコインを超える市場の暗号通貨(仮想通貨)ノアコイ...

あっくん丸

「映画」と「音楽」-- この2つの会員特典に驚愕! Amazonプライム

mare blu

えっ、東京都なの!? 青ヶ島村? 聞いたこともないな -- 海外から...

mare blu

「切腹」と紅葉狩りや花見の間には深い関係が!? 根底にあるのは日本人...

mare blu

職場恋愛・社内恋愛あるある

恋愛研究室

【語源】を知れば楽に増やせる【英単語】Proceed・Exceed・...

NO. U-12289

男兄弟が居る女性の魅力5つ

恋愛研究室

話題のキーワード

いま利用されているキーワード

関連記事

この記事に関連する投稿はこちら

今更だけどEXCELをはじめてみたい。(第4回)

流羽 海依

パソコンを初期化する前に【Windows】

birdsinging

今更だけどEXCELをはじめてみたい。

流羽 海依