ヤフージャパンプレミアム広告賞受賞

自社書籍

新卒採用情報

長期インターンシップ募集

採用情報

Bigmac 社長ブログ

スタッフ厳選!!おすすめ情報

ITAL株式会社

twitter
@Bigmac_work
google+
rss
rss
a
follow us in feedly
hatena.bookmark
このエントリーをはてなブックマークに追加

スタッフ厳選おすすめ情報

デザイン

おすすめ情報

2017年6月22日

トレンドWebデザイン手法、グリッドレイアウト。1から10まで解説!

trend-web-design-method-grid-layout-i-will-explain-from-beginning-to-end

Web制作者なら一度は聞いたことがあるでしょう、グリッドレイアウト。

グリッドレイアウトって?

Webでは「フラットデザイン」や「レスポンシブWebデザイン」と同様の比較的ここ近年で出てきたデザイン手法ですが、もともとは「グリッドシステム」や「グリッドレイアウト」と呼ばれ、印刷物などの紙媒体でごく当たり前に使われていた手法でした。
具体的には、画面やページ上で、縦方向、横方向に渡る直線(グリッドライン)で格子状に分割し、それらを組み合わせて共通のマージンを用い、ブロック内の要素サイズや配置を決定し、多少サイズ感が違ってもきちんと配置された印象を与えるデザインとなります。

通常の1〜3カラム程度のサイトデザインに飽きたデザイナーやユーザーには、うってつけのWebデザインと言えるでしょう。
とはいっても・・なにそれ?というノンデザイナーの方、いくつか参考サイトデザインを挙げてみましょう。

グリッドレイアウトのWEBサイトをご紹介

TEAM BEYOND
https://www.para-sports.tokyo/
para sports TEAM BEYOND

SUPER ME INC.
http://superme.jp/
SUPER ME INC.

LaSalle Logiport REIT
http://lasalle-logiport.com/
LaSalle Logiport REIT

なんとなく掴めていただけましたでしょうか?レイアウト自体はとても整然としているのに、テイスト次第ではぐんと前衛的で遊び心のあるサイトデザインに仕上がったりもし、人気があります。

グリッドレイアウトのメリットとデメリット

メリット

  • ぱっと一瞬で多くの情報で訴えることができ、一覧性が高く、情報を見つけやすい。
  • コンテンツが多いサイトでも、全体のデザインが統一されやすい
  • コンテンツの変更時も、配置などに構わず更新でき、効率的

デメリット

  • 一度に視覚に訴える情報量が多くなり、見る順番に迷いやすい
  • 更新頻度が高いサイト程、過去の目当ての記事を見つけにくい
  • 全体的な統一感があだとなり、コンテンツごとの重要度がわかりにくくなる

といった一長一短の面を持っております。
そのWebサイトに本当にグリッドレイアウトが向くのかを見極め、取り掛かる前に次にご紹介するタイプの中でどちらにすべきかをきちんと見極めてからデザインしましょう。

タイプ別グリッドレイアウト

グリッドレイアウトは、大きく分けて2種に分類されます。ひとつづつ見てみましょう。

カード型グリッドデザイン

カードを複数並べたように見えるデザインです。
幅が固定になるため、コンテンツの重要度が次に紹介するものよりもわかりづらくなり、ポートフォリオサイトや順位付けをしたくないコンテンツサイトに向いていると言えます。有名なピンタレストもこちらのデザインを採用していますね。

CHECK IT OR KYOTO
http://www.checkitorgo.com/kyoto/
CHECK IT OR KYOTO

Pintarest
https://www.pinterest.jp/
Pinterest

可変グリッドデザイン

ブラウザ幅に応じて、コンテンツの幅や配置を変幻自在に操るデザインです。
レスポンシブデザインとの相性がよく、どんなデバイスやブラウザ幅で閲覧しても、常に最適なサイズで見せられます。また、コンテンツごとの高さだけでなく幅も数パターン用意することで、カード型グリッドレイアウトよりも重要度を視覚的に訴えやすくなります。

そのかわりデメリットもあり、可変なため位置を固定できず、コンテンツの再配置によりひとつひとつの位置・時にはサイズも変えてしまうのは、ユーザビリティに悪影響であるという意見もあります。

HAKUHODO i-studio
https://www.i-studio.co.jp/index.html
HAKUHODO i-studio

大阪工業技術専門学校
https://www.oct.ac.jp/
大阪工業技術専門学校

さて、グリッドレイアウトでサイト構築をする場合、「レスポンシブデザイン(レスポンシブレイアウト)」と「リキッドデザイン(リキッドレイアウト)」を紐解く必要があります。

レスポンシブデザイン(レスポンシブレイアウト)

Googleが推奨しているレシポンシブレイアウトの方から解説しましょう。ひとつのHTMLを閲覧者のデバイスやブラウザ幅に合わせて適切なサイズで表示させるデザインを、レスポンシブデザインとされています。
メディアクエリ(Media queries)で構築する場合、ブレークポイント(Break point)はスマホ(640px〜750pxなど)、タブレット(960px〜1,024pxなど)、それ以上のPC(1,024px以上など)を指す3つで指定されています。

しかし、デバイスのサイズや画素は常に流動的で、度重なる規格変動により少し前のサイトでもレイアウトが崩れる、などの問題点がよく出てきてしまいます。
また、複数のブラウザ幅やデバイスにきちんと応じたデザインにしがたいため、どうしても一部の端末で表示が崩れたりすることを避けられません。全機種、全デザバイスは検証しようもありませんからね。

リキッドデザイン(リキッドレイアウト)

それに反して、リキッドデザインは、ブラウザの横幅に合わせて各コンテンツの表示サイズを動的に変更させることができるので、きちんと組まれていれば常識的な花幅であればほぼ一般的なブラウザ幅・端末でレイアウトが崩れません。

数年前まではスマホ・タブレット・パソコンの3サイズのみへの対応で良かったのが、各社いろんな端末やデバイス幅を市場に投入してきていて、タブレット並みに大きいスマホや、パソコン並みに大きいタブレットなど、メディアクエリでいざブレークポイントを設定しようとした時に、その境界の数値があいまいになりがちです。リキッドデザインはそういった時代の流れにフィットしたレイアウト手法と言えます。

また、リキッドデザインにはフレキシブルデザインも一部含まれるでしょうか。
しかしフレキシブルデザインは、完全に100%の横幅ではなく、たとえばPC程度以上のブラウザ幅で閲覧すると、サイト幅が960pxに固定されるなど、最大値や最小値を設定することができます。いろいろあって難しいですね。結局、どっちがいいんだ!という方に、それぞれの利点・欠点をお伝えします。

レスポンシブデザインとリキッドデザインのメリット・デメリット

ふたつに共通するメリット

  • HTMLが1つ(ワンソース)で済むため、制作や更新、運用に至っての手間が1回きり
  • ブラウザ幅を自動取得し、表示領域や画像を適切な幅に変更できるように組める

ふたつに共通するデメリット

  • パソコン用のHTML・CSSを一気に読む込むため、基本的に表示速度が全端末で遅くなりがち

レスポンシブデザインのメリット

  • 各デバイスに応じ、不必要な要素を自由に非表示にしたり部分的に変更したりなど出来る
  • レイアウトを各ブレイクポイント間で最適化できる

レスポンシブデザインのデメリット

  • レスポンシブは特にスタイルを強く上書き・打ち消していくように書き足していくため、構築に工数や時間がかかる

リキッドデザインのメリット

  • 各コンテンツを画面やデバイスのブラウザ幅や横幅にに合わせて、相対的に可変に出来る
  • 多少の規格変動になら更新なしで対応出来る

リキッドデザインのデメリット

  • 組み方の使用上、可能なデザインに限りがある(枠にはまったデザインになりがち)
  • コンテンツが長くなりがちで、読みにくいケースが多い

レスポンシブデザインやリキッドレイアウトをグリッドレイアウトに応用する

いろいろな情報を一気にご紹介したので、「結局グリッドレイアウトって・・!?」と悩んでしまったWebデザイナーのあなた。要は、いくつかの手法を比較検討し、その時の案件に応じたものをセレクトすればいいのです。
おそらく「レスポンシブ+グリッドレイアウト」「リキッド+グリッドレイアウト」「フレキシブル+グリッドレイアウト」など、複数の展開が思い浮かぶことでしょう。

ユーザーを飽きさせないためにあらゆる策を講じる1手段としてグリッドレイアウト、ぜひwebサイトに取り入れてみませんか?

このエントリーをはてなブックマークに追加
メルマガ登録

おすすめ情報

2017年6月19日

Adobeのソフトにはたくさん種類がある!?

there-ar-many-kinds-in-adobe-software-is-it

みなさん、Adobe製品がいくつあるのかご存知でしょうか?
デザインの仕事などをする上で欠くことができないのが、IllustratorやPhotoshopをはじめとするAdobe社の製品です。

従来のバージョンは「Creative Suite(CS)」と呼ばれ、CS5やCS6などと呼ばれていました。CCはこれの最新版です。
CSシリーズはパッケージで売られており、1本あたり数万円の価格で自分が使うソフトを単体で購入するか、セットのパッケージを購入するかでした。しかし、最新のCCシリーズでは毎月使用料を払い利用するタイプになりました。

また今の、CCシリーズは月額いくらかでコンプリートプランという、20種類ものソフトの他、TypeKitというwebフォントサービスみたいなクラウドサービスも全て利用できるようになりました。

Mac版のCreative Cloudのファイルを使うにはMac OS X 10.9以降のバージョンが必要になります。

ではCreative Cloudにはどのようなソフトが用意されているのでしょうか。
ジャンル別にみていきましょう。

写真編集

Photoshop

Adobe Photoshop CCは、おもに写真の編集を行う、ビットマップ画像(ラスタ画像)を扱うソフトです。PDFファイルを開くこともでき、トリミングはもちろん、自然な画像合成もできます。また、文字を追加して詳細な設定をし、ドロップシャドウをつけたり文字を歪ませたりすることも簡単にできます。

写真から不必要なものを消して、最初から何もなかったかのように見せたり、逆にそこに最初からあったかのように見せることもできます。こうゆう機能が、簡単に行えます。
しかし、photoshopは高機能でしかも汎用性もあるため、写真の編集以外でも使われます。

例えば、Webデザインをするときにグリッドツールやレイヤーを使用してホームページのラフを作ったりします。

Lightroom

Adobe Photoshop Lightroomは、写真の編集や写真の管理を行うソフトウェアです。主に写真の補正や現像、本やスライドショーの作成などを行います。

Photoshopとの違いは、Lightroomはフォトグラファーのために作られた、1日1日の写真の整理、編集、共有に脳力を発揮する写真を編集するのに突出したソフトです。一方、Photoshop は、写真編集に限らず幅広い分野で使用できる画像編集用のソフトです。簡単に言えば、Photoshopほど機能が充実してはないけど、写真の加工に特化した画像編集ソフトってことです。
Lightroomは使っている人があまりいないかもしれませんが、初心者にこそ使ってほしい機能がたくさんあります。理由は、Photoshop以上に簡単で綺麗に写真を編集できるからです。

グラフィック

Illustrator

Photoshopが点の集まりでできた、ビットマップ画像(ラスタ)を扱うソフトに対して、Adobe Illustrator CC(Illustrator)は、拡大・縮小しても荒れない、ベクター画像を扱うソフトです。
Illustratorに向いてる加工は、レイアウトの作成や文字組み、拡大・縮小していろいろなサイズで使用するロゴやイラストの作成です。
このことから、Illustratorは、名刺作りやロゴ作成、グラフの作成、ポスターデザインなどに使われます。
Illustratorは、Photoshopと一緒に使用することも多く、また、簡単なアニメーションを作ったり、LINEのスタンプ作成もできます。

InDesign

InDesign CCは、DTPソフトウェアです。DTPとは、「Desktop Publishing」の略で、パソコンでデータを作り、実際に印刷物を作成することです。InDesignではそのような印刷物のレイアウトを組めます。
Illustratorでもテキストの流し込みはできますが、InDesignでは何ぺージもある印刷物のレイアウトに適しています。

IllustratorとInDesignの違いとしては、Illustratorはグラフィックに特化し、他の機能も備わっているソフトに対し、InDesignはレイアウトに特化していて、他の機能も備わっているソフトというとこです。

Web制作

Dreamweaver

Adobe Dreamweaver CCとは、一言で言えば、HP制作ソフトです。
コードを入力する場所では、これから入力するであろう文字を補助してくれる、予測変換的な機能がついています。また、SassやLessなどのCSSをサポートし、リアルタイムでどこにエラーがあるのか分かります。それに、いちいちブラウザで確認しなくてもいいようにリアルタイムプレビュー機能がついているので、その場でデザインやレイアウトを確認できます。もちろんレスポンシブデザインにも対応していて、webデサイナーに人気のあるソフトです。

Muse

Adobe Muse CCは、印刷物をデザインするような感じでWebサイトを制作できるソフトです。Dreamweaverがコーディングに知識がある人が使うのに対し、Museは、HTMLやCSSに詳しくない人でもコードが一切不要なので、直感的に扱うことができます。

Museでは、PC用のさレイアウトにするか、レスポンシブなレイアウトにするかの選択や、カラム数をいくつにするか、などの設定をするだけで、ホームページの作成を始めれます。
Power Pointに慣れている人だと、似たような感覚でホームページを作成できるはずです。

映像・音声編集

After Effect

Adobe After Effects CCは、モーショングラフィックスや映像のデジタル合成、タイトルの作成などを目的とした、テキストや画像などのアイテムを、タイムライン上で重ねて映像を制作するときには欠かせないソフトの1つです。

映像の編集は基本2Dでしますが、3Dでの編集もできて、カメラやライトも3D空間上で移動・編集することもできます。いろいろなエフェクトを利用することで、魅力的な映像を作ることができます。
また、オーサリング機能という、DVテープやDVDなどに出力するための機能がたくさん用意されてます。

Audition

Adobe Audition CCは、音声を編集をするためのソフトです。テレビCMや
映画、プロモーションビデオなどほとんどの映像作品には必ずといっていいほどオーディオが付いています。オーディオがおざなりだと映像の魅力は半減してしまいます。
編集技術を活用することにより、撮影後の音声を作成したりできます。また、映像の音声を編集するだけではなく、ノイズの除去や効果音の作成、音声を合成することなどの作業も可能です。

まとめ

上記で書いたものがAdobe製品の全てではありませんが、クリエイティブなものを作るのに使用する可能性の高いソフトを中心に紹介していきました。
最新版へのアップデートがCCからはいつでもできるようになったことにより、新機能が出たらすぐに利用できるようになりました。今までは高額で手が出なかったというユーザーも出せやすい価格になったことで、多くのユーザーが気軽に手を出すチャンスができました。
これを機にそれぞれどんな用途で使うソフトなのかしっかりと理解し使っていきましょう!

このエントリーをはてなブックマークに追加
メルマガ登録

おすすめ情報

2017年6月5日

Webデザイナー必見!制作を効率よくするためにできること

how-web-designers-can-work-efficientlyWebデザイナーとしてWebサイトを制作するお仕事をする中で、「もっと効率よく制作したい!」と思う方は多いかと思います。デザイン、コーディング、またはシステム開発などにおいても地道な作業であり効率をあげていかないと、限りなく時間がかかっていくものではあるので、工夫して時間を短縮できるものならしたいと思いますよね?今回はそんなWebデザイナーのために、Webデザイナーができる効率をあげる方法を紹介したいと思います。

なんのために効率をあげるのか?

どのように、の前にまずはなぜ、という部分について触れたいと思います。Webデザイナーという仕事は技術職であり、一見どちらかというと芸術家のようなイメージを持たれる方も多いのではないでしょうか?実際に制作会社によってはそのような傾向のところもあるのかもしれませんが、おそらく「制作会社」というものは同時に生産性も求められるものです。

満足いくまでとことん時間を使う、ということが許されることはなかなか少ないのではないでしょうか?限りある時間の中で、自分でもしっかり満足のいくものを作り上げるのはなかなか難しいことです。時間をかければかけるほど良いものができるのは当然ですが、そのかけていい時間に限りがあるのがお仕事というものですよね?

そこで、ではその限りある時間の中でどうやって満足のいくものを仕上げていくかということを考えると、まずは無駄な時間を省く、これに尽きるのです。デザインをしていても、Photoshop、Illustrator、満足に使いこなせていますか?この部分のこの時間すごくもったいない・・・と感じることないですか?コードを書いているときも、繰り返し繰り返し同じ記述をしたりしていませんか?もっと効率良くできないのかな・・・と思うことないですか?

できるだけ「制作」というところに時間を使えるよう、生産性を高めていくことはWebデザイナーとしても大事なことだと思います。効率よくお仕事をしていけば間違いなくその分クオリティが上がるので、どうすればいいのか、このあと紹介していきたいと思います。

新しい技術を習得しましょう!

日々進化していくWeb業界なので、ついていくのも大変・・・新しいものが出てもなかなか手が出せない・・・という方も多いと思います。新しい技術を習得するには、習得するまでに時間も要します。ただ、一度身につけてしまえば、そのあとの作業がぐんと効率よくなることも期待できます。

例えば弊社ですと、コーディングの際、Sassを使っています。入社時にはcssの知識しかなかった人でも、実務をこなしながらSassとCompassを覚えていってもらっています。使いこなせるようになるまでには少し時間がかかりますが、やはりSassにしたことによって効率はとてもよくなったと実感しています。

特に、複数人でコーディング作業をする際、同じスタイルを使うときに人によって書き方が違いますよね?それがSassを使うことによって、extendやmixinを使って一行で済むということに最初はみんなが驚きます。Sassを使い始めてからコードの書き方も随分変わってきて、案件をこなすごとに生産性があがっていることが実感できます。

環境を整えよう

これはWebデザイナーに限ったことではありませんが、お仕事をする環境って大事だと思いませんか?デスクが散らかっていたり、書類がまとめられていなかったりすると、それだけで効率が下がってしまいます。また、PCの設定も大事ですよね?細かいことではありますが、仕事上いろいろなことを検索することも多いかと思います。その検索したもの、また1ヵ月後同じことを検索することってないですか?

一度調べたのにまた同じことを調べるというだけでも時間が無駄になってしまいます。調べたものをきちっと習得するために、まとめることや、よく見るサイトであるならばいっそブックマークしておくこと、ブックマークも分野ごとにわけることなども時間短縮に繋がってきます。

また、ローカル環境でお仕事をする際、フォルダ分けはしっかりしていますか?ある程度自分のPCでも規則性を持ってデータやファイル、画像をまとめておくことで、仕事のしやすさも変わってきますよね。自分のPCだから・・・といって、デスクトップがぐちゃぐちゃになっているPCを見るとやはり効率がいいとは思えません。そういったところを見直すことも効率をあげる一歩だと思います。

ツールを使いやすくカスタマイズしていこう

Webデザイナーとして使うことが多い、Photoshop、Illustrator、Dreamweaverなど、カスタマイズしていますか?こういったツールには拡張機能やプラグインがたくさん用意されています。なかなかそういったところに時間が割けないということもありますが、取り入れることによって感動するほど効率があがるものもたくさんあります。

また、使いやすいように設定を見直すだけでもだいぶ作業効率があがってくるので、ぜひいまいちど見直してみてください。弊社の記事でも便利な使い方をまとめた記事がいくつかあるので紹介しておきます。

初心者向け Photoshopの便利な小技集
イラストレーター入門 最初に知ってると便利なツールの特性と操作方法
Illustratorを効率よく使おう!

各記事であげられているように、Webデザインをしていく中でショートカットキーを覚えるだけでも格段と作業効率があがります。小さなことでも積み重ねることによって、合計の時間がだいぶ短縮できた!なんてこともあるので、細かいことでも少しずつ気を使えるようになるといいですね。

拡張機能や便利ツールを使いこなそう!

あげるとキリがないほど、この業界には効率化を図るツールが転がっています。こんなことできないのかな・・・ということ、調べれば大概のものはそういったツールや拡張機能があったりしますよね?その中でも弊社でも使っていておすすめできるものを過去にもいくつか記事としてあげているので、サイト制作やデザインに関連するものだけではなく、全般として紹介したいと思います。

作業効率化-Google Chromeの拡張機能10選-
デザイナーが使っているGoogleChrome拡張機能
Web制作者向け便利ツールをご紹介!

スケジュール管理・タスク管理をしっかりと

Web制作において重要性の高いスケジュール管理、タスク管理などしっかり行なっていますか?特にサイト制作においては、効率よく仕事をするために、前もってプランをたてることは大変重要なことです。作業をしながら迷うことが少なくなるよう、念入りにプランをたてて仕事に挑みましょう。スケジュール管理・タスク管理については以前も記事で紹介していますが、誰が、何を、いつまでに行うのかということを明確にしていくことで、効率もあがっていくので、しっかりとしていきましょう。

Web制作におけるスケジュール管理

まとめ

いかがでしたでしょうか?与えられたものをそのまま、その通りに使うのは誰でもできることではありますが、お仕事でしている以上、こういった効率面、時間短縮面においても工夫をしていくことが大事だと日々感じています。情報を整理していくことからツールのカスタマイズまで、多岐に渡ることではありますが、効率よくお仕事をすることで必ずクオリティアップに繋がってきますので、ぜひいろんなことにチャレンジしていきましょう!

このエントリーをはてなブックマークに追加
メルマガ登録

おすすめ情報

2017年6月3日

デザイナーへ仕事を依頼する時に発注側が意識すること

What the ordering side considers when asking work to the designer

「発注者とクライアントがイメージしているようなデザインに仕上がらない」「デザイナーやディレクター(発注者)とのコミュニケーションがうまくいかない」といった経験はありませんか?今回は、発注者が制作者へ業務を依頼する上での注意点をご紹介していきます。

発注者は制作者へイメージを共有するための画像やラフを用意する

A:「この画像を使って、こんなイメージで作って。」

B:「よくコンビニとかで見かけるようなポスターのイメージでお願い!」

極端な例ですが、発注者から口頭で制作物のイメージや要望を伝えられ、デザインを依頼された側として、Bのパターンは恐らく制作作業を思うように進めにくい状況になってしまいがちです。

発注者からの大まかな制作指示だけで、デザイン構成を考えることが出来るデザイナーも存在するかもしれませんが、発注側と制作者との間に、「この発注者は◎◎なデザインテイストが好きそうだ」「このデザイナーは■■のデザイン構成を得意としているから、この仕事を任せても大丈夫だろう」というような、ある程度の予想が立てられたり、過去に何度か業務のやり取りをした経験が有るのだと感じます。

Bさんの『よく見かけるポスター』を理解できるのはBさんだけです。このまま作業を進めた場合、

制作者「『よく見かけるようなポスター』と言われたから○○をイメージしました」

Bさん「○○のイメージでは無いな…。●●がよかったんだけど」

制作者「(●●がいいなら初めから言ってくれよ…)」

残念ながら制作者が行った作業はムダとなってしまいました。

もちろん、発注者が具体的なデザインイメージや正確な制作指示(説明)ができる訳でもないと思います。制作依頼を側にも、ある程度のヒアリングは必要ですが、いい加減な説明ばかりでは、制作者が一つの案件にかける作業時間も増えてしまいます。

上記のような状況を避けるために、発注者が提出して欲しいイメージに近いデザインをWebや雑誌媒体から探してみたり、簡単な手書きでもいいので自分で書き出してみてはいかがでしょうか?

私たちがおすすめ記事を書き上げる際、掲載するイラスト制作は、個人個人が自社デザイナーに依頼していますが、サンプル画像やラフを用意しています。

Bさんが『よく見かけるポスター』も、イメージするポスターや近しいチラシデザインを見かけた段階で写真に撮っておいてくれれば良かったですね。

もしくは「ここは○系の色で、この位置にはこの文章…。新商品だから写真が目立つように…。」

発注者がヒアリングしたクライアントの要望や、目を惹くと感じるイメージやデザイン案を具体的に書き出してみるのもいいでしょう。そして、実際に依頼も行い作業を行っていく中で、入れ込みたくない、いわゆる「NG要素」があれば、先に制作者へ伝えましょう。

デザイナーが作業をスムーズに行えるよう配慮を行う事で、結果的に制作もスムーズに進むと思います。Webサイト制作であれば、参考となりそうなサイトを見せてあげることもできると思います。

情報を詰め込みすぎないようポイントを絞ることが重要

クラインとが最初にイメージした時の要望から、後々入れ込みたい情報が増えることで、元の構成が薄れていくパターンがあります。

チラシを例に挙げると、最初に用意された素材で、紙面上での素材の配置やレイアウトを設計していた時に、後から情報が増えるとそれまで考えていたバランスが崩れ、調整するのに再度多くの時間を費やしてしまいます。

デザインに入れ込んで欲しいテキスト情報や素材に関しては、可能な限り初期段階で全て用意しておきましょう。

勿論、後からデザインの変更や追加をしたくなってしまうのも、仕方のないことです。当初、出来上がる制作物のイメージが定まっていない場合も多いため、ある程度制作が進んでいくことで見えてくるカタチが有り、続く指示や要望が出てきやすくなります。デザイナーに発注し、作業に入ってしまう前に、クライアントの要望やディレクターが伝えようとしている情報は本当に必要なのかと今一度考えてみましょう。

制作業務にかける時間や工数が多くなることで追加費用がかかってしまうことも場合によっては発生します。どうせなら一つのメディア・宣伝媒体でできる限り多くの情報を発信していきたいと考え、訴求内容や情報を詰め込んでしまいがちですが、結果的に制作作業が遅れてしまったり、結果的に納期が遅れてしまうかも知れません。

発注者は制作の手間を減らすための意識を持つ

今回、デザインを依頼する際の注意点を紹介しました。制作者に業務を依頼する際は「作業者がイメージできるように・趣旨を理解できるように伝えられるか」が、非常に大切なこととなります。制作物がなかなか一回では思ったように完成しないからこそ、できる限り少ない回数でイメージしていた通りのものが作成してもらえるような工夫を行う事。また制作を依頼する側は「相手にしっかり伝えられているのか」を意識してみてください。

 

このエントリーをはてなブックマークに追加
メルマガ登録

おすすめ情報

2017年5月31日

ホームページ制作入門 HTMLタグの基本

htmltag-basic

はじめに

はじめてホームページを制作しようとHTMLに触れたとき、どう記述していいのかわからない、タグはどう入れたらいいんだろうかと、最初に思う人が多いと思います。今回はホームページを制作するにあたって必要なHTMLの基礎について書いていこうと思います。

HTMLとは?

そもそも「HTML」とはHyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略でWebページを制作する為の「基礎言語(マークアップ言語※)」です。基礎言語はプログラミングの言語などを含めるとたくさんの種類がありますがWebでは一般的に「HTML(現在はHTML5)」が使われています。

※視覚表現や文章の構造などを記述する形式言語

HTMLのバージョン

1991年世界で最初のWebサイトが公開されました。ここで使われたのが「Hyper Text(ハイパーテキスト)」と言われる文書と文書を繋げるシステムです。考案した目的は研究員のデータや文献を繋げる(リンクさせる)ことで、そういったWebサイトを作る為の決まりごととして「HyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)が作られました。
その後HTML 0から1.0・2.0とバージョンアップしていき2008年にHTML5が発表され、現在は多様なメディアに対応するため、HTML5を使用するように勧告されています。

Webページの構成

基本的なHTMLのページの構成は以下のようになっています。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>タイトル</title>
</head>
<body>
</body>
</html>

DOCTYPE宣言

<!DOCTYPE html>

DOCTYPE宣言は「このファイルはHTML文章を記述していきます」という宣言文です。この部分を変えることによりHTMLのバージョンを変更することも可能となっています。記述しているテキストファイルは拡張子をHTMLにして「HTMLファイル」にすることも忘れてはいけません。

 

言語の指定

<html lang=”ja”>

この部分で言語を指定します。“ja”で日本語のWebページになり、“en”で英語のWebページになります。

 

<head>と<body>

<head>にはtitleなどの文章情報要素は入り、<body>には文章を構成する要素が入ります。

 

文字コードの設定

<head>内ににある<meta charset=”UTF-8″>は文字コードの種類を示すもので”UTF-8”以外には”Shift_JIS” ”EUC-JP”などがあります。一般的に使われるのは”UTF-8”が多いです。

 

ページのタイトル

<title>タイトル</title>

ページには必ずタイトルがあります。ページを開いた時にタブに表示される部分です。タイトルは検索する際の要素にもなりますので必ず付けましょう。

 

HTMLタグの基礎

タグには決まりごとがあります。タグとは<>でページの要素名(タグ名)を囲っているもので、基本的なタグの書き方は以下のようになります。
<タグ名>記述内容</タグ名>
<タグ名>は開始タグで</タグ名>は終了タグになります。
開始タグと終了タグで記述を挟みます。終了タグは先頭に「/(スラッシュ)」を記述しますが無い場合もあります。開始タグには必要に応じて「属性」や「属性値」を書き込みます。

<タグ名 属性名=”属性値”>記述内容</タグ名>

例えば
<h1 align=”center”>見出し</h1>
と記述すると

h1=見出し
align=配置指定
center=中央

といった内容になり、見出しをページの中央で配置するという記述になります。

 

HTMLの基礎タグ

まずWebページの構築によく使われているタグをいくつか紹介していきます。

 

テキスト関連タグ

<p>〜</p>

ひとつの文書のかたまり、段落で使用されます

 

<b>〜</b>

文章内で強調したい部分などにに使用されます。このタグで挟まれた文字は太字になります。

 

<strong>〜</strong>

文章内でさらに強調したい部分、重要な部分に使われます。<strong>〜</strong>で挟まれた文章内でさらに<strong>〜</strong>で囲むことで強調の段階をつけることができます。

 

リスト関連タグ

<ul>〜</ul>

配置する文章のリストに番号などの情報を持たせない場合に使用します。

 

<ol>〜</ol>

配置する文章のリストに番号の情報を持たせる場合に使用します。

 

<li>〜</li>

1つのリストを意味するタグで必ず<ul>〜</ul>か<ol>〜</ol>のリストタグに囲まれます。

記述例
<ul>
 <li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>

<ol>
 <li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>

 

表関連タグ

<table>〜</table>

ひとつの表を作成するタグです。基本的にこの<table>〜</table>タグ内に表の内容の記述をしていきます。

 

<tr>〜</tr>

表の横一列(行)の定義をするタグです。<tr>〜</tr>内に<th>や<td>タグでセルの記述を行います。

 

<th>

表の中の見出しが入ったセルを定義するタグです。

 

<td>

表の中のデータ(通常の文章)が入ったセルを定義するタグです。

記述例
<table>
 <tr>
<th>見出しセルA</th>
<th>見出しセルB</th>
<th>見出しセルC</th>
</tr>
<tr>
<td>セルA1</td>
<td>セルB1</td>
<td>セルC1</td>
</tr>
<tr>
<td>セルA2</td>
<td>セルB2</td>
<td>セルC2</td>
</tr>
<tr>
<td>セルA3</td>
<td>セルB3</td>
<td>セルC3</td>
</tr>
</table>

 

リンクタグ

<a>〜</a>

Webページ内で別のページにリンクさせる時などに使用します。<a>タグにhref属性でURLを指定します。またtarget属性でリンク先の開き方を指定することができます。target属性は “_self” (現在のウィンドウに表示)“_new” (新規ウィンドウ(1つ)に表示)“_blank”(新規ウィンドウ(複数)に表示)などがありますが、 “_blank”が多く使われます。

記述例
<a href=”http://big-mac.jp/” target=”_blank”>リンクテキスト</a>

 

画像タグ

<img>

画像を配置するタグで終了タグを必要としないタグです。src属性で画像のあるURLを記述します。他にwidthやheightで画像サイズの記述を行います。

記述例
<img src=”画像URLなど” alt=”画像の説明テキスト” width=”横幅数値” height=”高さ数値”/>

 

 

最後に

どうでしょうか?私も初めてHTMLを触ってみようとして、最初は理解できるのだろうかと不安でしたが、こうして見るとWebページは細かい部品の集まりで、部品ひとつひとつはタグで簡素に記述され、さらにそのタグに属性を追加することでWebページになっているんだなと思いました。ただ、現在のWebページはHTMLだけでなく、CSSという装飾を主に担当している言語も使って作られているので両方の勉強が必要になります。

 

このエントリーをはてなブックマークに追加
メルマガ登録