ウェブデザインを始めたい事始め

これからウェブデザインをやってみたい!

まったく何も知らない方向けに、カンタンにご説明致します。

実は、アプリや業務ソフトの開発よりも、敷居が高いのがウェブ系の制作・開発です。

未だに落ち着きなく新しい技術や仕様の取り決めがされ、1年も経てば、それが古いやり方になってしまう恐ろしい界隈でもあります。

複数のスキル・知識を押さえておかなければならないのが、ウェブ系です。

主に、以下のものになります。

HTML(ドキュメント)

ウェブページを構成する文章など

通常、以下のCSSスタイルとセットで使われます。

タグと言われる要素を覚える必要があります。

タグは、ページ内の文章の意味付けなどに使われます(ヘッダ部、メイン部、フッダー部など)

Google検索されやすくする(SEO対策)ために、丁寧に書く必要があります。

例:<html><body>・・・</head><main>・・・

CSS(スタイル)

文字などの要素を、どのように表示するか設定します。

色やサイズ、位置など、ですね。

HTML内のタグや任意の場所を指定する事ができます。スタイルだけが書かれたものなので、流用ができます。

HTMLとCSSの書き方、双方の知識が必要です。

例:.color_red { color:red; }

JavaScript(プログラム)

動的な動作をしたい場合に、利用します。

アニメーションさせたい、ボタンを押したら、とかですね。

非常に多くのライブラリが公開されているため、それを利用する場面がほとんどになります。。

通常のプログラミング言語と、ほぼ同じ書き方で記述する事ができます。

例:$(function(){$(document).tooltip({position:{my:”center bottom-20″,at:”center top”,using:function(position,feedback){$(this).css(position);}}});});

画像制作

ドロー系又は、ベクター形式の画像制作のスキルです。

無料で利用できるデータ集などもありますが、それをそのまま利用できる場面は限られます。使い慣れたエディタがあると便利です。

サーバサイド

ここから、もう少し深い所になります。

知識として持っていると、幅が広がります。

以下は、ウェブサーバ側の方になります。複雑なウェブサイトになると、これらでサーバとのデータのやり取りを行っています。

  • IIS/Apache/Nginxなど(ウェブサーバ)
  • PHP言語(プログラム)
  • Python/Ruby言語など(プログラム)
  • Node.js(JavaScriptサーバ・プログラム)
  • MySQL/SQL Serverなど(データベース)

その他

その他に以下のものもあります。

まったくのゼロから作るのでは無く、既に普及しているCMSソフトなどを改造・利用する事も多いです。

  • スマートフォン対応
  • ローカライズ(言語/地域)
  • セキュリティ周辺知識(想定した開発)
  • 負荷対策
  • Linux OS(サーバで多く使われてるOS)
  • WordPress(多く使われているCMS)

幅広い知識を押さえていた方が良いのですが、実際にはそのような人材はほぼ皆無です。

制作現場では、デザインとプログラミング、サーバーなどの単位で分業対応しています。

ウェブサイトをカンタンに翻訳したい

海外のサイトや記事などを利用する機会も増えてきました。

そんな時に便利なのが、翻訳サービスなのですが、私が利用してるアドオンをご紹介します。

Google Chromeブラウザを利用している事が条件です

アドオンのインストール

Chromeウェブストア(Google翻訳)を開きます。

Chromeに追加」をクリックします。

これだけです。

翻訳してみる

翻訳したい部分を、マウスで選択します。

すると、小さなアイコンのようなものが表示されます。

それをクリックします。

すると、翻訳文が表示されます。

必要な部分だけ翻訳できるので、英語の勉強にもなりますし、ページを移動せず、その場で利用できるのはとても便利です。

対象が英語だけでなくても、自動的に認識して翻訳してくれます。

※感覚的には、ピリオドまで1~2行までの範囲

寄り道

個人的にですが、あるサーバを構築する際、情報がマニアック過ぎて海外サイトにしかない事がありました。

そんな時、凄く重宝しました。

この時に、英語だけにとどまらず、ロシア語、アラビア語、ドイツ語などあらゆるサイトで翻訳しました。

英語の翻訳は必要十分に機能しますが、その他の言語は難しいようでした。な~んとなく分かるといった程度。

翻訳精度は、日々進化してるようですので、期待です。

ウェブデザインに挑戦してみたい@無料ソフト

以前にも増してSNSサービスが沢山あるので、ゼロからウェブデザインをやってみたいッ!・・という方は少なくなってしまった現在ですが。

WordPressに代表されるCMS・ブログのテーマ・テンプレート作成や、ちょっとしたスマホサイトの作成に、ツールや知識を持っておいて損しません。

まったく知識が無い方に、難しい事抜きで見た目でデザインできるWYSIWYGツールが便利です。

幸い、実績のあるソフトが無料で手に入ります。実際に私も長年利用してるので、安心してご紹介できます。

Expression Web4

何を隠そう、あのマイクロソフト社が配布しています。

Expression Web4(無料版)

以前は市販されているソフト群の一つだったのですが、今は開発が止まり、無料で配布されています。

基本的な機能は全て搭載されていますが、若干の古さも感じざるえませんし、書いたコードが100%再現されてない場面も散見されます。

・・が、ウェブデザインの骨組み・大枠を組み上げるに関してまったく問題がなく、癖さえ押さえれば、使いこなせます。

デザインとコードの分割表示が容易なので、ウェブの仕組みを理解する助けにもなります。

BlueGriffon

こちらも歴史あるWYSIWYGな有名なツールです。

BlueGriffon

昔にちょっとだけ触った事があるのですが、だいぶ雰囲気が変わったようです。

デザインの再現性も高く、CSSも見ながら編集できますし、動作が軽快で、なかなか使いやすそうです。

左右分割になりますが、デザインとコードの両表示も可能です。

無料版と、有償版に分かれており、有償版の場合は各種ツール類が利用できるようです(BASIC版75ユーロ、EPUB版195ユーロ)無料版でも必要十分です。

※EPUBは、出版系のデータ形式なので一般人には不要

Windowsの他、Mac OSやLinuxでも利用できます。

寄り道

ウェブデザインには、様々なスキルや知識が必要となります。

HTML5の書き方はもちろんの事、CSSによるデザイン、JavaScript等での動的動作、画像ドロー/ベクターデータの作成、3Dモデリング、表示デバイス毎の対応、サーバとのやり取り、サーバ側プログラム、セキュリティ対策、ライセンス管理などなど

これらを一度に頭に叩き込む事は、到底ムリですので、少しづつ理解を進めていくしかありません。

プロの環境でも、分業となっているので、全部を理解する必要もありませんが、多少の知識は持ち合わせておいた方が良いのは言うまでもありません。

※デザイン、プログラム、設計、サーバ運用など

また、世界の誰かが作って配布しているコードが星の数ほどあるので、利用してみる他、中身を眺めたりする事で、より知識を高める事ができます。