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

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

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

View:441

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

  • 流羽 海依
  • 428view

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

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

  • birdsinging
  • 1012view

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

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

  • 流羽 海依
  • 729view

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

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

  • こーだい
  • 1314view

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

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

  • こーだい
  • 771view

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

カテゴリーピックアップ

感動
ワクワク・ドキドキ♥編集室 401view

アクセスランキング

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

1

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

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

2

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

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

3

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

リク母

4

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

さくっちょ

5

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

さくっちょ

6

【この差ってなんですか】下半身が『太い人』と『細い人』の差は子供の頃...

みせす☻まなちる

7

白Tシャツ男子を悩ませる夏の『あの問題』が切なすぎるw

みせす☻まなちる

8

手作りを楽しもう 汗をかく時期にたくさん欲しい『 ハンカチ 』

リク母

9

コーヒーにハチミツを入れて飲むとこんなメリットが!4選

Yo-ichi

10

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

あっくん丸

ランキングをもっとみる

新着のまとめ

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

渡辺直美の美肌はこれで作れる!!最強ファンデ!

さくっちょ

それはかなり危ないんじゃないかい - 脚立編

mare blu

菊芋が糖尿病に凄い効果!血糖値を下がる魔法のパウダーとは?

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

クジラは人間の声を模倣できる!?

mare blu

【奇跡の瞬間】いやいや、絶妙なバランスだね!

mare blu

【奇跡の瞬間】心にはいつも羽を持ってるんだ!

mare blu

間違えないで! 私の足はこんなに毛深くないからね!

mare blu

大笑いせずにはいられないGIFアニメ -- 動物編

mare blu

話題のキーワード

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

関連記事

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

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

流羽 海依

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

birdsinging

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

流羽 海依