カテゴリー: 初心者向け

Adobe XDでWebデザインをしよう!画面作成からページ推移までの手順を紹介

デザインやプロトタイプを作成できるAdobe XD。みなさん使っていますか?先日アップデートもされ、Photoshopとの連携がより簡単になったり、Sketchファイルも扱えるようになるなど、進化が進んでいますね。これまではWebサイトのデザインにはPhotoshopが多く使われてきましたが、これからはXDが主力となっていきそうな予感。ということでAdobe XDを使ったWebデザインの手順を紹介します!
続きを読む

初心者向け!HTML/CSSのコーディング手順をイチからしっかりと。

HTMLやCSSの書き方を勉強してみたという初心者さんから、いざ自分でWebページを作っていくとなると、何から始めればいいのやら…?という声をよく耳にします。きちんと構成を考えてコーディングを始めないとレイアウト崩壊の危機…!今回は完成したデザインをHTML/CSSでコーディングしていく第一歩目の手順を紹介します。
続きを読む

手を動かして学習しよう!コードチャレンジ HTML/CSS 初級編

Web制作初心者の方向けに教える仕事をちょこちょこしているのですが、その時よく思うのが、本を眺めるだけでは覚えられないな…という点。やはりコーディングに関しては実際に手を動かしてみないと自分のスキルとしてしっかりと定着しません。そこで今回は私が教える中でよく使っている簡単な「コードチャレンジ」を紹介します。Web制作を勉強中の方や、同じく初心者向けに教えているという方の学習のヒントになればと思います。
続きを読む

Adobe Portfolioで簡単にポートフォリオサイトを作成

これまでもポートフォリオサイトの大切さを伝えてきましたが、ポートフォリオサイトが必要なのはWebの知識がある人だけではありません。そこで今回は簡単にポートフォリオサイトを作れる、Adobeクリエイティブクラウドに含まれているAdobe Portfolioを紹介します。コーディングの知識の無い方、特に画像を見せたいフォトグラファー、イラストレーター、画家さんなどにオススメです!
続きを読む

Webデザインの勉強を始める人が幸せになれるツール&サービス

先日超初心者さん向けにHTML・CSSを使ってWebページを作る講座を開いたのですが、予想通りやはり「これから勉強したい!」という人は、何から勉強すればいいのかがわからない事が多いです。また情報が多すぎて必要なツールもどれを選んだらいいかわからないケースもよく耳にします。そこで今回はその時教えたツールやサービスを中心に「これだけはそろえておこう!」というものを紹介します。あまりたくさん挙げても使い切れないかなーと思ったので、かなり絞っています。まずはこれらをとっかかりにし、自分好みのものを探していってくださいね!
続きを読む

Web制作+英語の1ヶ月集中強化プラン開催!バンクーバーでWeb制作と英語を学ぼう!

このブログの中の人である私、Manaは、普段クリエイターの留学を応援するバンクーバーの留学サポート企業、Frogの一員として、Webデザイナーやプログラマーをはじめ、多くのクリエイターの海外進出をお手伝いしています。Frogではこれから教育にも力を入れていこう!ということで、「Frog School」なるものをちゃくちゃくと進めているところです。教育事業の第一弾として、今回はこの夏バンクーバーで開催予定の「Web制作+英語の1ヶ月集中強化プラン」について紹介します!
続きを読む

Webデザイナーを目指す初心者さんが知っておきたい専門用語

WebデザイナーとしてWeb業界で活躍したいという初心者さんが、最初につまづきやすいのが、その専門用語の多さ。Webデザインの入門書をパラパラッとめくってみても、見慣れない単語に圧倒されてしまう人も多いのではないでしょうか?そこで今回はWebデザイナーなら知っておきたい単語をいくつかまとめてみました。Webデザインのお勉強中に「これなんだ?」という単語に出くわした時に参考にしてみてください!
続きを読む

Webデザインのスキルを磨こう!Webサイト模写のススメ

先日、Webデザイナーになってもうすぐ2年がたつというMさんから、「どうすればデザインのスキルを磨くことができるのか?」という旨のご相談を頂きました。今回は彼女の相談メールでもふれられている、デザインのスキルアップに有効なWebサイトの模写のやり方について掘り下げてみようと思います!
続きを読む

実はあまり知られていない?Adobe公式の無料チュートリアル動画集

Web制作にはかかせない、PhotoshopをはじめとするAdobe社の製品。初心者向けのWebサイト制作についてかかれたサイトや書籍でも必ず目にする名前だと思います。覚える事が多くて何から勉強すればいいかわからない!なんて言う声もよく聞きますが、Adobeの公式サイトで配信されている無料動画で、基本的な使い方はマスターできちゃいますよ!昔からあるサイトですが、意外と存在を知らない方がいらっしゃったので、記事にしてみます。
続きを読む

実践で学ぶWebサイト制作ガイド まとめ

8回に渡り連載した「実践で学ぶWebサイト制作ガイド」がついに終わったので、ここで簡単にまとめておきます。この記事では基本的な流れを説明していますが、リンクをクリックでより詳しい説明記事を読むことができます。これからWebサイトを作ってみたい!という人のお役に立てればいいなあと思います :) サンプルファイルもあるので、ご自由にダウンロードしてくださいね!
続きを読む