Webデザイナーにオススメ!無料で使えるポートフォリオ向けのサービスPortfoliobox

Webデザイナーの数は年々増え続けてる印象があります。
ところが自分のWebサイトを持っていないWebデザイナーというのが結構いらっしゃいます。

確かに、自分でサイトを作ろうと思うと初めての方は結構大変ですが、調べてみたら無料とは思えないくらい非常に高機能でポートフォリオが作れる、「Portfoliobox」というサービスがありましたのでご紹介します。

オススメの理由

「Portfoliobox」は、無料で使えるが非常に大きいです。
ですのでとりあえず、ポートフォリオサイトが必要と思ってる、転職、就職を考えてる人はとても始めやすいサービスです。

もちろん、気に入ったらそのまま有料版を使ってもよいと思います。
PROのプランは月額$6.9で利用できるので、全然高くないです。

デザイン

今時の洗練されたデザインテンプレートを数多く搭載しています。

参考

http://daannoppen.tictail.com/

http://www.lightmare.net/

http://www.martinstranka.com/

広告が小さい

どこのサービスも結構大きめに広告が入ってしましますが、PortForioboxは右下にちょこっとロゴマークが入るだけなので、コンテンツの邪魔にならないです。

レイアウトが豊富

自由度が高すぎると、逆に時間をかけて作ってしまします。
ここは割り切って、出来る範囲で作ってしまったほうがスピーディーに作れます。

レイアウトはページのコンセプトに合わせて入れるので、コンテンツに集中してページを作ることができます。

デザイナーだと結構苦労をするフォームの機能もありますので、便利です。

作れるページ数がちょうどよい

無料で使えるのは10ページまでですので、そんなに大量の情報を入れることはできません。
最初にサクッとポートフォリオを作りたいという意図には不足のないページ数で作れます。

日本語で使える

海外のサービスですが、結構キレイに日本語に翻訳されていますので、英語が苦手なWebデザイナーの方でも利用し易いです。

使いやすい

Webサービスなので当然と言われるかもしれませんが、すべてブラウザだけで操作が完結します。
本当にクリックとテキスト入力くらいでポートフォリオサイトができあがるので手を止める事がありません。

最初にしっかりとチュートリアルも挟んでくれるので、苦手意識が強い人でも大丈夫でしょう。

プラン

プランはとてもシンプルで有料は一つしかありません。
PRO版は年払いで月額$6.9です。

有料版になると、ドメインのもらえたり、作成出来るページの量が無制限になります。
他にも、デザイナテンプレートが増えて、CSS,JSのカスタマイズが可能になり拡張性があがります。

無料版で出来ること

ウェブブラウザを使ってサイトを作成し、管理します。

無料版としての制限としては下記のものがあります。

  • 30件の画像のホスティング
  • 10件の商品のホスティング
  • 10ページのホスティング
  • デザインテンプレートの数
  • 独自ドメイン

機能紹介

出来ることがたくさんあるので簡単にですが機能を紹介します。

デザイン

Portfolioboxは少し変わっていて、レイアウト(機能)を選んでページを作っていきます。
類似サービスですと、デザインテンプレートを選んでそれに合わせて作っていくのですが、Portfolioboxでは、色やフォントは別の項目から選んで、機能(例えば、履歴書ページ)を選んでそこに予め決まった項目で入力していきます。

悩まなくて済むので便利です。

同様にナビゲーションの位置も別の項目で選べるのでデザインテンプレートに依存せずに作れます。

ロゴの設定

自分で作ったオリジナルのロゴ画像も入れれます。

フォントなど

テキストやボタン毎に色の割当が自由にできます。
Fontも設定可能ですが、あまり日本語向きなものが無いので少し残念です。

設定

SNSなどのURLも豊富に登録できます。

フォーム

ブログのコメントやフォームからの問い合わせもこのサービス内で完結できます。

マーケティング

ちょっとおもしろいのがこのマーケティングの設定で、Webサイトの基本的なマーケティングのチェックもここからできます。
自分でサイトを持ったことないWebデザイナーはこの辺が結構抜けてることが多いので、凄くユーザーに寄り添ったサービスだと思いました。

最後に

Webデザイナーがこういったサービスを利用するのに抵抗あるかたもいるかもしれませんが、サイトを持っていないよりは遥かにましだと思います。
ポートフォリオサイトはサイトのデザインで良し悪しを見るわけではなく、あなた自信のスペックを見てもらうところなので、中身がしっかりしていればテンプレートやこういったサービスを使っても全然便利で良いと思いますがいかがでしょう。

私自身自分でサイトを持っていますが、このサービスを知って、今のサイトの管理がめんどくさいので、こっちに移してもいいんじゃないかと思ってしまいました。

学生や転職を考えてるWebデザイナは最初ポートフォリオを作るのに時間がかかってスタートが遅れてしまう人は大多数いると思いますので、今ポートフォリオサイトを持っていない人はとりあえずでも作っておくのをオススメします(ゝω・)

Portfoliobox

concrete5の勉強の仕方

今年から縁あってconcrete5のサイトを幾つかつくる機会に恵まれました。
元々WordPressの構築は情報も多く学びやすかったのですが、concrte5は手探りで勉強しました。

concrete5は始めようと思ってもなかなか始められないと聞きますので、これから始められる方達の参考になれば幸いです。

concrete5を知る

先程紹介とかぶりますが私はWordPressが得意でしたので、どうしてもWordPressベースで比較してしまいました。
比較した結果、比較するものじゃないと肌で感じましたので、まずはconcret5が何が出来るのかを知ると良いと思います。

concret5公式サイト(日本)には初めての向けのコンテンツがありますので、まずはこちらを一読すると、概要は見えてきます。

一点注意頂きたいのがバージョンですconcrete5では5.7系から大幅なバージョンアップをしていますので、5.6系以下の情報を見ても食い違う事がありますので、これから始められる人は5.7系以降の情報をもとに学んでください。
書籍も発売していますが、これは5.6系のものなので今からこれを見て学ぶのは非常に厳しいです。
本当に良い本ではあるのですけどね。

concrete5の紹介

concrete5の特徴はブラウザから直接編集する直感的な操作です。
jimdoやペライチなどをイメージしていただいてもよいでね。

実際に表示されているページの画面を直接編集して、テキストや写真を自由に配置できます。
グリッドの機能もデフォルトで入っているのでレイアウトもかなり柔軟に作れます。

ブロックと言われる、個々の機能をもったコンポーネントを入れるだけでページが作れます。

他にもこんな機能こともできます。

  • headerやfooterなどの共通部分も編集できるようにしたい。
  • ページによってイレギュラーなレイアウトで作りたい
  • 特定のページだけデザインを全然別物にしたい
  • 公開時期を指定してキャンペーンページを自分でつくりたい。
  • 公開には承認フローを取り入れたい

実際に使ってみないことには、わからないかもしれませんが、使って見るとWordPressで企業サイトとかつくるもんじゃないなと過去の自分を反省しました。

concrete5はもともと企業サイトなど汎用的なサイトを作るためのCMSですので WordPressとは作る目的が違います。

WordPressですとプラグインを入れて、機能を追加して企業サイトを作りますが、concrete5ではそれらの機能がデフォルトで入っています。

  • スライドショー
  • ページャー
  • グリッドのレイアウト作成
  • テーマ編集機能(デザイン編集)
  • ブログ機能
  • HTML挿入
  • SEO対策機能
  • Google Mapsの埋め込み
  • YouTube動画の埋め込み
  • サイトマップの作成
  • 権限の割り当て機能
  • 承認機能
  • フォーム作成
  • アンケート機能
  • アクセス解析ツールのタグ挿入機能
  • 他サイトのRSSの読み込み

などなどです。

デフォルトで使える機能が多いので今後バージョンアップされないということは無く安心して使えます。

苦手なサイトというとWordPressが得意とする、個人ブログのような時系列で記事がならんでいるようなサイトです。
結局のところ使い分けが大切ですのでconcrete5が万能というわけではないので、誤解のないように。

勉強会に参加する

日本でもコミュニティがとても盛んで関西,名古屋,東京で勉強会が開催されています。

勉強会は初心者向けのものが多く、何も知らない状態で参加しても大丈夫です。
記事を読んでもピンとこなかったりしますので、実際に利用しているユーザーの声が聞けるのは良い刺激になります。

学ぶというのもそうですが、concrete5を好きになるというのが一番のメリットですね。私はWordPressがコミュニティに参加して好きになったタイプです。

自分で作ってみる

人の話を聞いたり、ブログやスライドを読んでいてもあいつまでたってもできないままなのでまずは自分で作ってみましょう。

作る手順としては以下のような感じでしょう。

  • concrete5の本体をダウンロード
  • MAMPなどで環境構築
    • PHP 5.5.9 以降
    • Apache Nginx などの Web サーバー (Apache24を推奨。)
    • MariaDB もしくは MySQL 5.1.5 もしくはそれ以降で、空のデータベース1個
  • themeをインストールする
    • 最初はデフォルトのものでコンテンツがあるものを選択して慣れてみる
    • 次は別のthemeをインストールしてコンテンツは空っぽの状態にする。
  • 自分でthemeを作ってみる
    • 無料で使えるHTMLデザインテンプレートを入れてみるのをオススメします。
  • 人に使ってもらう
    • 実際に作ったWebサイトを人に説明してもらうと自分では気づかなかったしてんが見えて改善案が見えてきます。
  • 改善する

これらを何度か繰り返すとConcrete5が使える状態にまで成長できると思います。

最後に

concrete5を使うことで制作のワークフローがぐっと変わり、効率的でかつ、お客さんにも喜んでもらえるサイトが作れるシーンというのがまだまだ存在しています。

いつか触ってみたいと思っている人はぜひこの機会にconcrete5のサイトを作って見てください(ゝω・)

Webデザイナーが転職するために普段からやっておくと良いこと

転職したいってきっかけは人それぞれありますが、急に転職を心に決めたとしてもすぐに動き出せる人は少ないと思います。

今回は転職をスムーズに成功させるために普段からしておいたほうが良いことを紹介します。

“Webデザイナーが転職するために普段からやっておくと良いこと” の続きを読む

WordPressのカスタマイズしやすいのスターターテーマ Understrap

みなさんはWordPressの案件をするときはどんな開発フローをされてますか?
1から作るひともいれば、何かフレームワーク的なものを入れて作る人、スターターテーマを使って作る人、子テーマ前提で作る人など様々な進め方がありますね。

私は去年までは「Underscores」を使って開発していましたが、最近WordPressの開発では、UnderStrapというテーマを使っています。
UnderStrap公式サイト “WordPressのカスタマイズしやすいのスターターテーマ Understrap” の続きを読む

Webデザイナーが効率よくHTMLコーディングができるPugのメリット

2014年頃からPug(当時はjade)を使ってHTMLのコーディングを進めてました。
最初はこんな書き方もできたほうが良いのかなくらいで考えていたのですが、最近ではPugがないほうがしんどい状態になってきました。

保守が苦手だったり、修正時にミスが多い人はPugを使うことでコーディングの質を向上させることができます。

今日はそんなPugのメリットをご紹介します。

“Webデザイナーが効率よくHTMLコーディングができるPugのメリット” の続きを読む

簡単にスクロールアニメーションが設定できるAOS(jQuery不要)

最近のWebサイトを見ているとメインビジュアルのアニメーション以外にもスクロール時にコンテンツの一部がアニメーションしてるページが増えてきました。

一つ一つJSで操作を管理すると結構手間になりますがライブラリを使えば、簡単に出来るものもあります。

今回はJSをほぼ書かずに簡単にスクロールアニメーションが設定できる「AOS(Animate On Scroll Library」をご紹介します。

まずは試しに実装してみたサンプルをご覧ください。

サンプルページ

“簡単にスクロールアニメーションが設定できるAOS(jQuery不要)” の続きを読む

コーディングが苦手な初心者WebデザイナーにオススメのCSS勉強の方法

Webデザイナーになろうとして、まず最初につまずくのがコーディングです。
CSSは慣れてくると簡単なのですが初めて触るとなると、何から手を付けてよいかわからない、何が正解がわからないなどの理由で挫折する人を多く見かけます。

本記事ではCSSが全然わからない方がCSSのコーディングに慣れるための勉強法を紹介します。

概念的なものを知る

まずCSSの書き方どうこうを覚えるより、まずはWeb制作の全体感を覚えたほうが、自分が担当する範囲がイメージでき、必要性が見えてくるので覚えやすくなります。

「CSSはコーディングするために必要」という考え方だけだと、どうしても作業的な見方になりがちなのですが、プロセスが見えてくると何をすれば良いのかが見えてくるので、まずは全体像の把握をおすすめします。

全体像を学ぶのは簡単なようで難しいです。
個人的には下記の書籍をオススメします。

Webデザインの新しい教科書 改訂新版 基礎から覚える、深く理解できる。〈HTML5、CSS3、レスポンシブWebデザイン〉

こちらはWeb制作入門書として人気の書籍です。
制作の「背景」や「理由」を学び、応用力をつけれる1冊です。

インターネットの仕組みから、サイト制作のワークフロー、
HTML・CSSの技術的な解説、Webサイトを公開・運用するまでの基礎知識を、
順序立てて学べます。

「すでに知っているよ」という方も慢心せずに一度目を通してみると気づきがあって「自分で考える力」や「ずっと役立つ応用力」が身につくでしょう。

基本の勉強

全体の概要を把握した後は、実際に手を動かす事でCSSを学びます。
オススメは下記2サイトのカリキュラムを受ける事です。

無料で学べるので、気軽に開始できます。
2サイトともそれなりの時間は必要ですが基礎は大事ですので、時間をかけてわからないところをそのままにせずにしっかり学んでおくと今後の習得スピードが上がります。

ドットインストール

progate

やってはいけない学習法

これまでオススメの方法をご紹介しましたが、しないほうが良い方法もご紹介します。

丸暗記する

学校のテスト勉強の延長で「暗記」に頼るのはオススメしません。
なぜなら、Webサイトをコーディングするときには暗記では対応できないケースが殆どで、応用が求められるからです。

同様にコピー&ペーストを多様するのもオススメしません。
制作の現場でも必要なコードをコピー&ペーストできるようにスニペットを作ったりはしますが、それはそのコードを理解している人だから問題なく使えるのです。

コードの意味を理解して記述していかないとなかなか身につきません。

ノートに書いて覚える

以前CSSのプロパティをノートに書いてる人を見かけたのですがこちらもオススメしません。
理由はノートに書いたコードは検索できないので、必要なときにすぐに探せないからです。

手で書いたほうが覚えるという方もいるかと思いますが、コードを書き慣れる意味も含めてちゃんとエディターで書いてそれがきちんと自分の思い描いたように実行されるのか見える状態で練習したほうが良いです。

全て覚えようとする

CSSもHTMLを「全部」を覚えようとするとかなり大変です。
私も使わない・知らないCSSプロパティとかたくさんあります。

重要度を均一にするのではなく必要なもの・よく使うものに重点をおいて調べたほうが身につきやすいですし、応用力もつきます。

CSSを応用するためのオススメの勉強法

CSSもHTMLも覚えただけではなかなか身につきません。
やっぱり何度もコードを書く事、そして毎日書くことが重要です。

ただCSSプロパティを覚えてもいつ使っていいかわからないとう悩みにぶつかると思います。
私はそんなときはレイアウトの模写をしました。

CSSの模写の方法

デザインの表現力を上げるためによく模写を勧められますが、CSSにも同じ事がいえます。
レイアウトの模写といってもどこかのページ1ページをそのまま模写するのではなく模写したい一部だけを決めてそのレイアウトだけを模写します。

この方法だと簡単なものだと数分で終わることができますので毎日の修練にぴったりです。
同時に答えのコードもブラウザから見ることができるので、悩みすぎて諦めるということもないです。

ブラウザで対象のレイアウトがどんなCSSプロパティが当たってるか見たいときは各ブラウザにあるデベロッパーツールを使うと良いです。

Google Chromeの場合デベロッパーツールはメニューバーの表示→開発/管理→デベロッパーツールのところにあります。
デベロッパーツールを起動して確認したいHTMLを選択するとそこにどんなCSSプロパティがあたっているか確認ができます。

毎日コードを書くための環境

コードを書くのにエディターを立ち上げるのが面倒、簡単なレイアウトを作るのにHTMLとCSSのディレクトリを作るのが面倒と思う人はcodepenというサービスがオススメです。

このサービスではブラウザ上でHTML・CSS・JSが書くことができそれをすぐにプレビューしてくれます。
その他にもタグが付けれたりするので、書いたレイアウトをいつか探す時にも役立ちます。
毎日続けると、たくさんの模写が溜まっていくので自分がどのくらいのCSSの勉強をしたのかが見えるので達成感もあります。

Webデザイナーの人でCSSはちょっとできるくらいの人は、このくらいはできますみたいな共有の場にしても良いですね。

レイアウトを探す方法

Webサイトを探すときは、デザインギャラリーのサイトから探してみるのはどうでしょう。
io3000

最新のデザインに触れれる機会も増えますのでオススメです。

まとめ

CSSは知らない人からするととっつきにくいですが、覚えてしまえば簡単です。
最初は苦労すると思いますがWebサイトを作るには切っても切れないですし、いつ自分が書かないといけない状況になるのかわかりません。
CSSはWebサイトを作る人には必須のスキルです。

本記事で苦手意識を早く克服できる手助けができたら幸いです(ゝω・)