WEB制作

WEB制作

「素人ラフ」から格好いいLPを作ることなどできるのかという愚問

「素人ラフ」を渡されたら本能的に逃げたくなる・・・

これは最近思ったテーマ。どういう状況かというと詳細には伝えられないのがアレだが、世の中には様々な組織で様々な方法でLPなどのデザインが作られるという前提がある。

おそらくデザイン会社やWeb制作会社では、きちんとした経験のあるディレクターなりデザイナーがクライアントからヒアリングして、それなりのレベルのラフが作られるのだと思う。世の中的には、こういう作られ方が多いのではないかと思う。

ラフの出来が悪ければ先輩なり、上司なりがサポートしたり、あるいは強引に制作が進められて、後で思ったように完成できなくてグダグダになる。

言葉のとおり「ラフ」に作ってはダメ

ラフというのは「粗い、大雑把な様子を表す、英語の形容詞(wikipedia)」だそうだが、ディレクターとか編集者とか職種を問わず、ベテランが作るラフと素人みたいな人が作るラフには泥沼の差がある。

ベテランというかプロが作るラフは例え手書きで一見「ラフ」に作られていたとしても完成形がイメージされているので、実際に制作に入った時に破綻することがない。

一方、素人が作ったラフは一見するとプロが作ったラフと同じように見えるのだが、完成系が正確にイメージされていないので、実際に作り始めると破綻が起きやすく、どこに着地したら良いかわからなくなる。

素人が作ったラフを受け取ったら、デザイナーだとか実作業する立場である貴方がやることは、本当にそのラフで完成形を作ることができるのかの検証作業。大きくラフを作り変える必要があるかもしれないし、ラフを作った人にあれこれヒアリングしないとならないかもしれない。

「素人ラフ」を信用してはいけない

前述のように世の中には様々な組織があり、制作物の作られ方のフローも様々。

社内的なインハウスのデザイナーなんかだと、どこかの部署の担当者とか、まともにデザイン物やサイトを作ったことが人が詳細なラフを作ってポン!と渡してくる場合がある。

大体、縦長のLPを作るのにパワーポイントとかでページごとに分かれたラフを持ってきた場合とかは地雷率が高いので注意。普通、Webサイトは紙みたいにA4サイズとかに別れていないので、手書きのラフとかの方がよっぽど信用できる。

これは本当にあるのだが、2019年のご時勢でもPC(向けのデザイン)のラフしかなくて、SP(向けのデザイン)はお任せなんてこともある。どっちかというと、普通はSPの方が閲覧が多いのだからSPメインであるべきだが、企業とかだとPCファーストの頭の担当者が多いのだ。

横長のPCの画面と縦長で操作が指のスマホでは、かなりデザインを変えないとならないので、PCだけでしか考えていないデザインだとSPを作るのが苦労する場合が多い。SPはSPでマージンの取り方や、セクションの分け方など、しっくりくるデザインを作るのがPCより難しい場合も経験上は多い。

コミュニケーションの質がデザインに反映される

デザインの仕事をしていて思うのは、制作に対するコミュニケーションの質が大事ということ。

自分のために自分で作るデザインならともかく、素人ラフをポンと渡されて作るデザインは、コミュにケーションの質が問われるのだ。

素人だろうと、クライアントファースト(社内的なものであろうと)で作られないとOKが出ない場合もあるし、忙しくて相手が捕まらない場合もあるだろうし、素人ラフを渡されて作るデザイナーは大変だろうと思う。社内的なものなら、苦労しても苦労しなくても「お金」が同じなのでモチベーションが沸きづらいというのもあるしね。

WEB制作

AWS障害の対応からわかる社内エンジニアの優劣

画像はイメージです

2019年8月23日午後、米アマゾンのクラウドサービス「AWS」の東京リージョンのデータセンターで大規模な障害が発生した。数時間に渡って、AWSを利用している多くのWebサイトやゲーム、PayPayなどの決済アプリなどで利用できないなどの障害が発生した。

企業では一部のエンジニアに丸投げのことも

クラウドサービスと聞いても、その道の専門家以外にはピンと来ないはずだが、今どきは多くの企業が自社でサーバーを持たず、WebサイトやWebサービスはAWSのような外部のサーバーで動作させている。

そのため、そのサーバーで障害が起きると、業種問わず広範囲に影響が出ることになる。もちろん、AWSにもそういった障害を想定したバックアップがあり、利用する各社がそういったシステムを構築したりもするのだが、今回はそういったものが機能せずに大きな障害となったらしい。

では、企業のWebサービスでのサーバー周りを管理しているエンジニアはどういった人達のことが多いのだろうか。それは常駐している外部のエンジニアだったり、フルリモートの自宅勤務のエンジニアだったりする。

アマゾンの障害だから仕方ないっすねw

外部のサービスに依存する以上は、そのサービスが障害を起こすと自社のサービスにも影響を及ぼす。

きちんと障害の可能性まで考慮したシステムを開発しているエンジニアは優秀だと思うが、障害報告があっても「アマゾンの障害だから仕方ないっすねw」と半笑いのエンジニアもいたりいなかったりするだろう。

考えてみると明白だが、Apple、Google、マイクロソフトにアマゾンと、主流なITデバイスは大抵はアメリカの企業によるもの。日本語化されているから気づきにくいが、スマホ依存症をはじめとした現代日本人の生活は、アメリカ人に支配されているともいえ様。

WEB制作

【Adobe】レスポンシブWebデザイン制作の王道的チュートリアル無料動画

2019年現在もGoogleはバカの一つ覚えのようにレスポンシブを推奨していたりするが、日本での現状を見ると、必ずしもレスポンシブが主流とも言えない。

個人のブログ系サイトでは普及しているものの、企業のECサイトやら、ECサイトに類似したような複雑な作りのサイトでは、レスポンシブは工数が大変で割りに合わないため、むしろレスポンシブを使っているサイトは少ない。

Webデザインの初心者は「今はレスポンシブが当たり前!」などと思っているかもしれないが、企業系のサイトではレスポンシブじゃないのが普通。程度が知れるので、そこは勘違いしないように。

企業サイトなどでレスポンシブが避けられている理由

チュートリアルを紹介する前に、レスポンシブのメリット、デメリットを整理しておきたい。

メリットはGooleが馬鹿みたいに推奨しているのでSEOにほんの少し有利なこと。あとは、制作後に1ソースで管理できるため、文章の変更程度であれば、1回の作業で完了すること。

デメリットは制作が難しいのと、しかも制作手法が乱立していて学びにくいこと。そもそも論だが、レスポンシブは1ソースで横長画面のPCと、縦長画面のスマホのデザインを制作するため、どっち付かずなシンプルなデザインしかできないこと。

別々に作った方が、それぞれの画面サイズに最適化して作れるのは言うまでもない。企業系サイトではシステムを実装したりもするので、さらに難しくなる。レスポンシブが使われる場面は限られる。

Bootstrapというレスポンシブフレームワーク

冒頭のようにレスポンシブが普及しだしたのは2012年頃から。大体そのくらいからレスポンシブ系の参考書が出回るようになるのだが、そもそもHTMLやCSSは個人ごとに書き方が大きくことなるものだけど、レスポンシブもしかりで、参考書によってアプローチの仕方が大きくことなる。

2012年~2017年くらいに発売された参考書の中には、レスポンシブを簡単に作るために「Bootstrap」という、2019年においてはWebデザイナーに存在を無視されがちなフレームワークを用いて制作されている場合が多い。

このBootstrapは、あくまで個人の主観によるが、プログラマーなどエンジニアの人でHTMLやCSS、そしてデザインセンスがないという人でも、それなりに世間で使われているような平均的な見栄えのデザインを手っ取り早く作るには、役に立つ場合もある。

だが、Bootstrapにはバージョンがあり、ややこしい。今は古めのBootstrap3や新しいBootstrap4が使われていることが多いが、それぞれで独自の記述方法があり、元々が海外で作られていることもあり、わかりやすい日本語の情報を探すのが難しい。

一度Bootstrapで作ったサイトは、常にBootstrapの仕様に沿ってHTMLを書かないとならないこともあり、細かいことをやろうとすると、お手製で作ったサイト以上に苦労するとになる。

Bootstrapはデザインはそれなりでいい、こだわりはないというエンジニア向けのデザインツールなのだと私は思う。同様に思うWebデザイナーの人は相応にいるらしく、最近はWebデザインの世界ではあまり話題に上がらなくなってきた。ただ、Wordpressのテーマの中にはBootstrapベースで作られているものもあるので、一定の需要はあるのかな。

それでもレスポンシブが作りたい人へ

レスポンシブ自体は一般的なHTMLやCSSの知識があれば、Bootstrapなど使わずとも、手打ちで作成することができる。

ただ、こうしたBootstrapを中心としたレスポンシブを取り巻いてきた状況もあり、いざ手打ちで制作する王道的な方法を学ぼうとも、わかりやすい書籍やチュートリアルサイトを探すのは難しいだろう。

そんな中、とても有用なのが意外にもAdobeが無料公開している下記のチュートリアルサイトだ。

チュートリアルページは構成がわかりにくいが、3ページとなっている。

1、はじめに(的なページ)
https://helpx.adobe.com/jp/dreamweaver/how-to/responsive-web-design-basics.html

ここではレスポンシブとは何か、というようなことを説明していて、これからチュートリアルで作るページについて説明されている。読み飛ばしても大丈夫。

2、メニュー部分作成
https://helpx.adobe.com/jp/dreamweaver/how-to/create-responsive-navigation-menu.html

Webデザインで面倒臭いのがメニュー周りの制作。3つの動画で解説している。スマホで多いハンバーガーメニューは使わない。

3、コンテンツ部分作成
https://helpx.adobe.com/jp/dreamweaver/how-to/create-responsive-grid-layout.html

要となる部分。Bootstrapを使わず、手打ちでグリッド的なクラスを付けて作っていく。今の主流に合わせて、スマホデザインが元になるモバイルファーストで制作していく。

AdobeのDreamWeaver CCを使った解説になっているが、DreamWeaver固有の便利機能を使わなければ、他のエディタでも制作できる内容となっているのも良い。

レスポンシブを一から作ったことなくて、良いチュートリアルないかな~と思っている人はぜひお試しあれ。