• info@coplom.com

Category ArchiveWebサイト制作

Adobe XDの使い方

Adobe XDの使い方

Adobe XDでできることは大きく分けて以下の3つです。

・ワイヤーフレームやデザインカンプの作成
・プロトタイプ作成
・デザインの共有やコメント

特徴的な機能は
・リピートグリッド 要素の繰り返しがドラッグひとつでできる
・シンボルの作成 アートボード間で何度でも使用できるオブジェクト
・Adobe CCとの連携 Creative Cloudライブラリとの連携(command + o)

使い方はXDを起動すると右上にチュートリアルが表示され、基本的な機能を学習することが出来ます。


画面の名称は左から
・ツールバー
・アセットパネル
・アートボード(ベースボード)
・プロパティインスペクター

ショートカット
・command + スクロールで拡大/縮小
・command + 3 でフォーカス
・command + R リピートグリッド
・command + Enter プレビュー
・space で手のひらツール

・R(Rectangle) 長方形
・E(elliptical shape) 楕円形
・Y 多角形
・P ペン
・L 線
・T テキスト
・A アートボード

学習のポイント
・ブロックを選択してコピーコンテンツの作成と画像の一括適用
・アートボード選択してスクロールを垂直方向で設定
・アセットのカラーを表示して一括差し替え、逆にアセット側からカンバスハイライトも可能
・プロトタイプタブで遷移をつないだり、ヘッダーの固定、プレビュー
・プロトタイプのドキュメントに招待からclouddocumentに保存、共有、共同編集可能(共有タブ)

Adobe XD スターターキット基礎編&中級編

Adobe XD スターターキットは以下からダウンロード可能です。
Adobe XD スターターキット基礎編&中級編

Adobe XD 活用方法

Adobe XD 活用イメージ

Adobe XDことはじめStep1:ワイヤーフレームを作ってみよう! ›
Adobe XDことはじめStep2:これは便利!デザインカンプがサクサク作れる ›
Adobe XDことはじめStep3:快適&軽快!PhotoshopとXDの最強連携 ›


実際に作成する際には共通パーツを洗い出してはじめに制作しておくことがおすすめ。

ボタン
メニューアイコン
ナビゲーション
見出し
本文

各種アイコン

【プロマネ】WBSで進捗管理する方法

PM実務編

プロジェクトマネジメントとは?

Web業界の方はよく聞く表現かと思いますがプロジェクトマネジメントとは何でしょうか?
簡単に言ってしまうと、「プロジェクトをどのように遂行するか計画を立て、その目的を達成できるように「課題管理」「スケジュール管理」「成果物管理」を行いプロジェクト全体をコントロールする」ことになります。

また、一般的にプロジェクトを推進するメンバー・組織のことをプロジェクトマネジメントオフィス(PMO)と呼びます。

プロジェクトマネジメントとして行うこと

  • 企画
  • 費用の見積もり
  • 費用以外の人的、物的リソースの確保
  • WBS(Work Breakdown Structure)の作成
  • メンバーへのタスクの割り振り
  • 進捗管理

プロジェクトマネジメントをする上で必要なスキル

  • 全体を見渡すスキル
  • 先を見越すスキル
  • コミュニケーション能力

プロジェクトマネジメントが必要な理由

プロジェクトマネジメントが必要な理由は、プロジェクトマネジメントの手法を用いることで、プロジェクトの目標達成の確実性が上がるからです。プロジェクト体制を構築し体系的に運用することで、コミュニケーション面、スケジュール面を始め、効率的に業務を行うことが可能になります。

プロジェクトの目的を達成するためには「プロジェクトのゴール」を定義し、そのゴールに向かって適切な進行をする必要があります。
また、プロジェクト成功のためのプロセスを構築するためには、品質・コスト・納期以外にもスコープやリスクなども管理する必要があります。

そのためにはゴールを達成するための膨大な量のタスクを分解して体系化していかないと、作業が費用率になったり抜け漏れが起こったりします。そこでよく使われるのがWBSという手法です。

WBS(Work Breakdown Structure)とは?


WBSとは、Work Breakdown Structureの略でプロジェクトのスケジュール管理に使われるツールの1つで、作業工程を分解して示したもののことです。分解された作業に担当と期限を設定し、スケジュールがわかるようにした工程図のことはガントチャートといいます。
作業工程を分解して示したものと、それをスケジュールにしたものを合わせて「WBS」と呼ぶことも多いですが、基本的な流れはWBSに基づいてガントチャートを作成することになります。

WBSが作れるツール紹介

WBSはもちろんExcelでも作れますが、ガントチャートの作成が大変だったり、プロジェクト進行時に遅延などや作業追加で1つ項目に変化があった場合に修正が難しいなどデメリットが多いです。そこでクラウドベースでWBSが作成できてメンバーで共同編集も出来る便利なツールをいくつか紹介します。

  • smartsheet
  • asana(insta gant)
  • Wrike
  • Backlog

PM知識編

PMBOKとは

PMBOK(Project Management Body of Knowledge)とは、プロジェクトマネジメントに関するノウハウや手法を体系立ててまとめたものです。1987年にアメリカの非営利団体PMIが「A Guide to the Project Management Body of Knowledge」というガイドブックで発表してから徐々に知られるようになり、今ではプロジェクトマネジメントの世界標準(事実上の標準)として世界各国に浸透しています。内容は4年に1度くらいのペースで改訂され、今の最新版は2017年に発行された第6版となっています。

ただし、PMBOKの整理された知識は有用な物ですが実際の現場でそのまま使えるものではありません。プロジェクトマネジメントを強化するための具体的手段を考える際の参考に使うというイメージが良いかもしれません。

PMIとは

PMBOK を作成したPMI(Project Management Institute)は、アメリカに本部があります。日本では1998年にPMI日本支部(PMIJ)が設置されており、PMBOKの普及促進やPMPという資格の認定、交流などを行っています。

PMP® (プロジェクトマネジメント・プロフェッショナル) とは

プロジェクトマネージメントに関する国際資格で有名なものにPMPという資格があります。
取得することで体系的な仕事の進め方が身につくため業務の効率化が図れたり、この資格の取得によって社内外に対してプロジェクトマネジメントの専門性を証明出来るのでキャリアアップとしても活用できます。ただし、資格取得のための受験資格が厳しかったり、更新の試験やそのための条件もあるので、時間や費用といったコスト面では少しハードルがあります。

PMP®試験の受験資格としては以下があります。 
・プロジェクトマネジメントの指揮・監督する立場での経験(高卒で5年以上の実務経験証明、大卒で3年以上の実務経験証明)
・35時間の公式なプロジェクトマネジメントの研修の受講(REP(Registered Education Provider)、大学、PMI支部など)

PMP® とは、PMI 本部が認定しているプロジェクトマネジメントに関する国際資格です。
PMP® 試験は、PMI が策定した知識体系である PMBOK® (Project Management Body of Knowledge) ガイド に基づいて実施され、受験者のプロジェクトマネジメントに関する経験、教育、知識を測り、プロフェッショナルとしての確認を目的として実施されます。
専門知識を有していることを証明するために、米国PMI本部が資格認定を行うものであり、法的な資格、免許ではありません。

PMP® 資格は、プロジェクトマネジメントに関する資格のデファクト・スタンダードとして広く認知されており、プロジェクトマネジメント・スキルの評価基準として、IT・建設をはじめとする多くの業界から注目されています。

PMI® 試験・資格について

プログラミングはもとの言葉を知れば楽しく覚えられます!

HTMLは何の略?

HTMLやCSSをはじめ、プログラミング言語をこれから始める方は
是非その語源も覚えておくと楽しく覚えられると思いますよ。
ちなみにHTMLはHyperText Markup Languageの略です。
ハイパーテキストとはハイパーリンクでインターネット上に散在するドキュメント同士を相互に参照可能にする仕組みのことです。
つまり、簡単に言うとHPをコーディング(書く)ための言葉って感じですね。

もう一つURL(Uniform Resource Locator)で良く見かけるHTTPは「Hyper Text Transfer Protocol」の略です。
つまり、簡単に言うとサーバーとブラウザ間でHPの言語を送受信する仕組みですね。

要素 略語 意味
a anchor 碇(いかり)つまり舩の重りですね。リンクの出発点と到達点を指定します
alt alternate 代理つまり画像の意味を代わりに言葉で書いて検索エンジンに知らせます
br line break 改行。これはそのままですねラインブレーク
div division 区分。 divはブロック要素で、見出し、段落、リスト、フォームなどのひとつのまとまった単位という意味。一般的なブラウザでは前後に改行が入って表示される。
dl definition list 定義リスト
dt definition term 定義の期間
h heading 見出し。そのままですね。
img image 画像(image)そのまま。
href hypertext reference ハイパーテキストを参照つまり、そのテキストにハイパーリンクするという意味になります。
li list item 一覧の項目
p paragraph 段落
rel relation 関係。そのファイルとどんな関係にあるかを検索エンジン等にしらせます。
span span 範囲。spanはインライン要素で文章の一部としての範囲という意味。その前後は改行されません。
src source 情報源(source)
table table 表。そのままですね。
td table data cell 表のデータのセル
th table header cell 表の見出しのセル
tr table row 表の列
ol ordered list 規則のある一覧
ul unordered list 規則のない一覧

HPでは表示要素の内側に設ける余白部分のことをpadding(パディング)といいます。
英語で「詰め物」という意味ですね。
境界線からテキストなどの内部の表示領域までの距離を表し、
CSS(スタイルシート)などで任意の値に設定できます。

境界の外側の余白(他の要素との距離)のことはmargin(マージン)といいます。
英語で「余白」という意味ですね。

値を1つ指定した場合: [上下左右]のパディングを表します。
値を2つ指定した場合: [上下][左右]のパディングを表します。
値を3つ指定した場合: [上][左右][下]のパディングを表します。
値を4つ指定した場合: [上][右][下][左]のパディングを表します。

[css highlight=”4″ title=”paddingのサンプル”]
.entry-title {//HTMLでclass指定したentry-titleに対する指定という意味です。
background: url("URL");//タイトルの背景に指定したい画像のURLを入れます。
background-position: left center;//背景画像を左寄せして上下の幅の中央に置きます。
padding:20px 10px 20px 20px;
font-weight:bold;
}
[/css]

HP・アプリ制作スクール【マナビックWeb】

こんにちは。
昨今、プログラミング教育は米国をはじめとして世界で注目を受けています。

米国の「Code.org」は、プログラミングを義務教育化する運動が盛んに行い、
ビルゲイツやジャックドーシー、スティーブジョブズなどが、
「プログラミングの重要性について」語る動画が少し前に広まっていたのもご存知だと思います。

また日本では、今年の6月に、プログラミングが義務教育で必修化することが発表されています。

特に近年のスマホの普及などによって、私たちの生活は急速にデジタル化が進んでおり、
それを支える、プログラミングの重要性は明らかでしょう。

プログラミング脳を身につけられる。

プログラミングを通じて、論理思考力や表現力が高まるため、
問題解決スキルが身につけられるようになるということ。

登壇者である、深津氏によれば、

”プログラミングというと、コードを書くイメージが強いが、
実は一番時間を割くのは、問題を解決するための仮説作りや、仕組みやルールなどを作る方法を考える事。
コードを書くのは、本当に最後の最後”

また、Code.orgの動画の中で、スティーブジョブズが
”プログラミングから”考え方”を学んだ” と言っている。

今、子供向けのプログラミング教育が注目されているのは
いわゆるこのプログラミング脳を身につけられるからでしょう。

2. アイディアを生み出したり、整理に使える。

まつもとゆきひろ氏によれば、
”プログラミングは翻訳作業ではなく、自身のアイディアを表現するもの”
と言っています。

言語に落とし込むことで、思考が整理することができるようになります。

また、ルールさえ作ってしまえば、コンピューターが自分の代わりに作業をしてくれるなど、
自身の力を何倍にも拡張できるのもプログラミングを学ぶメリットだと言っていました。

3. 自己実現する力が身に付く。

”お金も、大きなチームもあれば、プログラミングは学ばなかったと思う。
そういうのを持っていない人にとっては、プログラミングは最大の武器になる。”

と深津氏。

しかも、作った物は、ネットを通じて簡単に世界へと広がっていきます。

これからの時代は、個人がネットを通じて他者とどのように関わるのか、
自由にデザインできる時代になると言います。

以前と比べれば、プログラミングさえあれば自己実現の可能性もひろがっています。